首页 > 其他分享 >从输入URL到页面展示到底发生了什么?--01

从输入URL到页面展示到底发生了什么?--01

时间:2024-07-21 12:41:47浏览次数:7  
标签:01 HTTP 请求 响应 URL -- 浏览器 解析

在浏览器中输入一个URL并按下回车键后,会发生一系列复杂且有条不紊的步骤,从请求服务器到最终页面展示在你的屏幕上。这个过程可以分为以下几个关键步骤:

  1. URL 解析
  2. DNS 查询
  3. TCP 连接
  4. 发送 HTTP 请求
  5. 服务器处理请求
  6. 接收 HTTP 响应
  7. 浏览器渲染页面

1. URL 解析(示例)

URL(Uniform Resource Locator)是一种统一资源定位符,它包含了访问资源所需的所有信息。一个典型的URL格式如下:

http://www.example.com:80/path/to/resource?query=param#fragment

解析过程中,浏览器会将URL拆分为多个部分:

  • 协议(Scheme):如httphttps
  • 主机(Host):如www.example.com
  • 端口(Port):默认为80(HTTP)或443(HTTPS),如果没有显式指定,浏览器会使用默认端口。
  • 路径(Path):服务器上的资源路径。
  • 查询参数(Query Parameters):以?开头的参数部分。
  • 片段标识符(Fragment Identifier):以#开头的部分,指向页面内的某个位置。

2. DNS 查询

浏览器需要将URL中的主机名转换为IP地址,这个过程通过DNS(Domain Name System)来完成。DNS 查询的步骤包括:

  • 浏览器首先检查本地缓存中是否有该域名的IP地址。
  • 如果没有,浏览器会向本地DNS服务器发送查询请求。
  • 本地DNS服务器会递归查询其他DNS服务器,直到找到对应的IP地址并返回给浏览器。

3. TCP 连接

得到了IP地址后,浏览器需要与服务器建立连接。这个过程使用TCP(Transmission Control Protocol)完成。TCP连接的过程包括三次握手:

  1. 客户端发送SYN(同步)包:请求建立连接。
  2. 服务器返回SYN-ACK(同步-确认)包:同意建立连接。
  3. 客户端发送ACK(确认)包:确认连接建立。

4. 发送 HTTP 请求

TCP连接建立后,浏览器会发送一个HTTP请求。一个典型的HTTP请求包括以下部分:

  • 请求行(Request Line):包含请求方法(如GET或POST)、请求的URL路径和HTTP版本。
  • 请求头(Headers):包含客户端信息、期望的响应格式等。
  • 请求体(Body):POST请求时可能包含提交的数据。

5. 服务器处理请求

服务器接收到HTTP请求后,会进行处理:

  • 解析请求:服务器解析请求行和请求头,提取所需信息。
  • 路由请求:根据请求路径和方法,将请求路由到对应的处理程序。
  • 生成响应:处理程序处理请求后生成HTTP响应,包括响应行、响应头和响应体。

6. 接收 HTTP 响应

浏览器接收到服务器的HTTP响应后,会进行解析:

  • 解析响应行:确定HTTP状态码(如200表示成功,404表示资源未找到)。
  • 解析响应头:提取响应的元数据,如内容类型、内容长度等。
  • 解析响应体:获取实际的数据内容(如HTML、CSS、JavaScript)。

7. 浏览器渲染页面

浏览器解析并渲染HTML内容的过程包括以下步骤:

  • 构建DOM树:解析HTML文档并构建DOM(文档对象模型)树。
  • 构建CSSOM树:解析CSS文件并构建CSSOM(CSS对象模型)树。
  • 执行JavaScript:如果HTML中包含JavaScript文件,浏览器会下载并执行它们。
  • 构建渲染树:将DOM树和CSSOM树结合,构建渲染树。
  • 布局和绘制:根据渲染树进行布局计算,将元素的位置和大小确定后进行绘制,将页面内容显示在屏幕上。

 

这篇博客可以作为面试八股,拱大家使用

标签:01,HTTP,请求,响应,URL,--,浏览器,解析
From: https://www.cnblogs.com/zx618/p/18314352

相关文章

  • A. Tokitsukaze and Strange Inequality(dp版)
    链接https://codeforces.com/problemset/problem/1677/A题目思路这题感觉还是挺有难度的(为啥题解都说不难Orz),给我启发最大的是这句话:具体怎么处理呢?把i按照n->1的顺序遍历,然后j从反方向遍历:i+1->n。求S[i][j]时用S[i+1][j],因为S对应的是以j为结尾的,然后在遍历中相当于不知......
  • C. Salyg1n and the MEX Game
    原题链接题解在bob操作之后,alice可以选一个与bob一样的数补充,因此,最后的s为初始s加初始alice添加的元素,所以alice第一次要添加mex初始scode#include<bits/stdc++.h>#definelllonglongusingnamespacestd;inta[100005];voidsolve(){intn;cin>>n;......
  • [JS] 一次逆向
    开始此文章为个人学习研究,请勿用于非法用途。背景是我是小鹤音形用户,常常忘记一个字怎么打,就需要查形;而windows软件的查形太麻烦,网页查询更麻烦,所以我想写脚本,配合我的meow-tool工具快捷的查形。但是显然,网站的接口是加密的,需要添加sign参数的请求体中;所以首先需要逆向出sign......
  • 从输入URL到页面展示到底发生了什么?--02 握手的故事:三次握手详解
    在这个数字化时代,网络通讯就像人类之间的交流,需要一种方式来确保彼此能够顺利对话。在计算机网络中,TCP三次握手就是这样一种确保双方通信顺畅的机制。今天,我们将通过一个生动有趣的故事来讲解这个重要的过程。引子:约会前的准备想象一下,你要和朋友约个饭,但由于时间久了彼此不太确......
  • Codeforces Round 960 (Div. 2) A - D
    link好图好图qwq这次也是终于装上插件codeforcesbetter!了,妈妈再也不用担心我的英语啦A-SubmissionBaitA先手,B后手,优先往奇偶性的方向想一开始我只是单纯考虑A总是选最大值的数的奇偶性,样例过了?交上去发现wa2然后恼...瞎搞了个33344,发现A可以先选3......
  • 为什么必须使用三次握手?
    TCP(传输控制协议)的三次握手是建立可靠连接的关键步骤,其设计目的是确保通信双方都准备好,并且避免重复的连接初始化。三次握手并不是随意设定的,而是有其重要的技术理由。1.防止重复的连接初始化假设只使用两次握手,会存在以下问题:旧的重复SYN包问题:如果网络中的一个旧的SYN包(因......
  • 如何处理 Flutter 项目中的 TypeError: fork_exec() 错误?
    我目前正在构建一个Flutter应用程序,它使用SeriousPython包来利用OpenCV和Numpy进行图像分析,并且我正在我的iPhone上进行测试。我认为我已经接近它的功能,但我收到了一个我无法识别的错误。XCode终端打印此内容:Traceback(mostrecentcalllast):File"/var/fold......
  • 将具有最接近值的整数列表分组
    我有一个列表:d=[23,67,110,25,69,24,102,109]如何将最近的值与动态间隙分组,并创建这样的元组,最快的方法是什么?:[(23,24,25),(67,69),(102,109,110)]defgroup_close_integers(data,gap):"""将具有最接近值的整数列表分组。参数:data:要分......
  • 如何使用 python 更新设备孪生?
    我目前正在尝试使用python更新设备孪生中的属性。但由于SSL错误而无法执行此操作。下面是代码fromazure.iot.hubimportIoTHubRegistryManagerimportcertifiimportssl#ConnecttoIoTHubandsendmessagetodeviceCONNECTION_STRING="HostName=iothub-j......
  • 对 Pyarmor 文件进行反混淆
    我有一个pythonpyarmor混淆文件,我想对其进行反混淆。pyarmor混淆文件包含以下内容我可以找到一种方法来取回包含在pyarmor中的源代码吗?frompyarmor_runtime_000000import__pyarmor____pyarmor__(__name__,__file__,b'PY000000/*....etc....)我尝试......