在浏览器地址栏输入url到页面显示出来,这之间发生了什么?

本文详细解析了HTTP请求的过程,包括DNS解析、TCP连接、发送HTTP请求、服务器处理及返回响应、浏览器解析渲染和连接结束。重点讨论了浏览器如何查找IP、HTTP请求构造、DOM和CSSOM树的构建以及缓存机制。同时,阐述了浏览器对资源的并行下载限制以及如何利用Cache-Control和ETag进行缓存验证。

这之间的过程概括的来讲是以下六步:

1,DNS解析

2,TCP连接

3,发送HTTP请求

4,服务器处理请求并返回HTTP报文

5,浏览器解析渲染界面

6,连接结束

那更加具体的说呢,是以下的步骤:

输入URL后,首先找到这个URL域名服务器的ip,为了寻找这个IP,浏览器会首先查找缓存,查找缓存的顺序是 浏览器缓存=》系统缓存=》路由器缓存,如果缓存中没有,则查找系统的host文件,如果还是没有找到的话,就去DNS服务器上去请求服务;得到服务器的IP地址后,浏览器根据这个IP以及相应的端口号,构造一个HTTP请求(请求包括请求方法,请求说明,请求附带的参数),并将这个请求封装在一个TCP包中,这个TCP包会依次经过传输层,网络层,数据链路层,物理层后到达服务器,服务器接受请求,并在处理后返回给浏览器HTML,因为HTML是树形结构,所以浏览器根据这个树形结构构造DOM树,在DOM树构建的过程中如果遇到JS脚本,则会停止构建DOM树,因为脚本的执行很可能会改变DOM树的结构,之后会根据css样式构建CSSOM树,并且将DOM树和CSSOM树合并为渲染树(这里主要做的是排除非视觉结点,比如script,meta标签和排除display为none的结点),之后进行布局,布局主要是确定各个元素的位置和尺寸,之后是渲染界面,因为HTML中会包括图片,音频,视频等资源,在解析DOM的过程中,遇到这些会并行下载,浏览器对每个域的并行下载数量都有限制,一般是4-6个;之后就是缓存,缓存一般通过Cache-Control,Last-Modify,Expires等首部字段控制,Cache-Control和Expires的区别就是:Cache-Control使用客户端的相对时间,而Expires使用的基于服务器端的绝对时间,因为存在时差问题,我们一般使用Cache-Control,在请求这些有了设置的缓存的数据时,会首先查看数据是否过期,如果没有过期,则直接使用本地缓存,如果数据已经过期则请求并在服务器校验文件是否修改,如果上一次的响应设置了ETag的值会在这次请求的时候作为IF-None-Match的值交给服务器校验,如果一致,继续校验Last-Modified,没有设置ETag则直接校验Last-Modified,再决定是否返回304。

### 浏览器输入URL页面渲染的详细流程 当用户在浏览器地址栏输入URL后,整个过程可以分为以下几个阶段: #### 1. URL解析与DNS查询 浏览器接收到用户输入URL后,会解析其中的协议、域名和路径等信息[^1]。随后,浏览器向DNS服务器发送请求,通过多层查询将域名解析为对应的IP地址[^5]。此过程中,如果本地缓存中存在对应记录,则直接使用缓存中的IP地址,否则逐级向上查询。 #### 2. TCP连接建立 DNS解析完成后,浏览器与目标服务器之间通过TCP三次握手建立连接[^1]。这是基于五层网络协议栈的一部分,确保了可靠的数据传输。 #### 3. HTTP请求与响应 浏览器通过已建立的TCP连接向服务器发送HTTP请求,该请求包含请求头和请求体[^1]。服务器接收并处理请求后,返回一个HTTP响应,其中包括状态码、响应头和响应体。响应体通常包含HTML文档内容。 #### 4. HTML解析与DOM树构建 浏览器接收到HTTP响应数据后,开始解析HTML文档,并逐步构建DOM树。在此过程中,HTML文件中的外部资源(如CSS、JavaScript文件)会被提前加载,而不会等到渲染完成后再加载[^3]。 #### 5. CSS解析与CSSOM树构建 同时,浏览器解析CSS文件并生成CSSOM树。尽管CSS解析与DOM解析是在不同线程中执行的,但它们都必须完成才能继续后续步骤[^4]。CSSOM树的生成可能会阻塞页面渲染,因为渲染需要先计算好节点的样式。 #### 6. 渲染树(Render Tree)构建 一旦DOM树和CSSOM树都构建完成,浏览器将两者合并生成渲染树。渲染树包含了所有可见的元素及其样式信息,用于后续的布局和绘制操作。 #### 7. 布局与绘制 - **布局(Layout)**:根据渲染树计算每个节点在屏幕上的确切位置和尺寸。 - **绘制(Painting)**:将每个节点绘制到屏幕上,生成最终的页面图像。此过程可能涉及GPU调用以优化性能[^2]。 #### 8. 回流与重绘优化 在页面交互或动态更新过程中,任何DOM结构或样式的改变都可能导致回流或重绘。为了提高性能,建议遵循以下优化策略: - 尽量减少对DOM的操作频率。 - 使用`documentFragment`批量操作DOM。 - 避免频繁读写操作,利用浏览器的渲染队列机制[^2]。 #### 9. 连接关闭 最后,浏览器与服务器之间的TCP连接通过四次挥手的方式关闭[^1]。 ```python # 示例代码:模拟简单的HTTP请求与响应 import requests def fetch_webpage(url): response = requests.get(url) if response.status_code == 200: return response.text else: return "Failed to load webpage" html_content = fetch_webpage("https://example.com") print(html_content) ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值