从输入 URL到用户看到页面都经历了哪些

本文详细介绍了网页从请求到加载的整个过程,包括地址栏网址缓存、DNS缓存、HTTP请求缓存等多个环节,并解释了浏览器如何处理HTML、CSS构建DOM树、CSS树以及渲染树的过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、浏览器请求、加载在这里插入图片描述

  1. 地址栏网址缓存
  2. 检查 HSTS 预加载列表 (307)
  3. DNS 缓存
  4. ARP(地址解析协议)缓存
  5. TCP 发送缓冲区 & 接收缓冲区
  6. HTTP 请求缓存( CDN 节点缓存、代理服务器缓存、浏览器缓存、后端动态计算结果缓存等 )

二、浏览器渲染
在这里插入图片描述

  1. 处理HTML并构建dom tree
  2. 处理css并构建 css tree
  3. dom tree 和 css tree 合并成 render tree
  4. render tree 结合layout(层级上下文)生成render layer
  5. reder layer 和 graphics layer 合并成页面

说明:
脚本执行的时机:
1.script 加载到时立即执行
2.script defer 页面解析时异步按序执行DomcontentLoad之前完成
3.script async 脚本加载完成异步无序执行,不一定在DomcontentLoad之前或之后,一定在onload之前完成

<think>嗯,用户想了解从浏览器输入地址到页面渲染完成的过程。这个问题看起来挺基础的,但涉及的知识点其实很多,需要一步步分解。首先,我得回忆整个流程,确保每个步骤都准确,同时用简单易懂的中文解释清楚。 首先,用户输入URL后,浏览器应该会先处理这个输入。可能包括检查是否有缓存,或者直接开始解析URL。这里可能需要提到URL的结构,比如协议、域名、路径等。然后,DNS解析是关键步骤,把域名转换成IP地址。这里要解释DNS查询的过程,比如浏览器缓存、系统缓存、路由器、ISP的DNS服务器,以及递归查询和权威DNS服务器。 接下来是建立TCP连接,三次握手的过程需要简明扼要地说明,为什么需要三次握手,确保可靠连接。然后是HTTPS的话,可能还要提到TLS握手,这部分可能稍微复杂,但用户可能想知道安全连接的建立过程。 发送HTTP请求的部分,要区分请求方法,比如GET、POST,以及请求头的内容。服务器处理请求时,可能需要提到后端处理,比如Web服务器、应用服务器、数据库交互,然后生成响应。响应状态码如200、404等也是需要提及的。 接收响应后,浏览器如何处理HTML,开始解析和渲染。这部分比较详细,比如构建DOM树、CSSOM树,合并成渲染树,布局计算,绘制页面。还要提到JavaScript的执行可能会阻塞解析,以及优化措施如async和defer属性。 最后,页面渲染完成后的持续过程,比如加载其他资源,事件循环,动态内容更新等。这部分可以让用户了解页面并不是一次性加载完毕,而是有后续处理。 需要注意用户的层级,可能不是技术人员,所以要用比喻或者简单例子,比如把DNS解析比作电话簿查找,三次握手比作打招呼确认双方都能通信。同时,按照系统级指令,数学公式和代码要用正确的LaTeX格式,但这个问题可能涉及较少公式,更多的是步骤描述。 另外,检查是否有遗漏的步骤,比如重定向、缓存验证(304状态码),或者CDN的作用。是否需要提到HTTP/2或HTTP/3的影响,比如多路复用,减少延迟。不过可能属于进阶内容,用户可能只需要基础流程。 最后确保结构清晰,分步骤说明,每个步骤的小标题明确,用列表或分段让读者容易跟随。同时检查技术术语是否准确,比如渲染树的构建,重排和重绘的区别,但可能不需要深入,保持概述级别。</think>从浏览器输入地址到页面渲染完成的全流程可拆解为以下步骤(以访问 `https://example.com` 为例): #### 一、URL解析与预处理 1. **协议补充**:若用户输入不完整(如 `example.com`),浏览器自动补全协议(`https://`) 2. **编码转换**:非ASCII字符转换为`%`开头的UTF-8编码,如`空格→%20` 3. **安全检查**:检查非法字符,阻止可能的XSS攻击 #### 二、DNS解析(域名→IP地址) 1. **查询顺序**: - 浏览器缓存 → 操作系统缓存 → 路由器缓存 → ISP的DNS服务器 - 若未命中,进行**递归查询**: $$根DNS→.com权威DNS→example.com权威DNS$$ 2. **结果缓存**:TTL决定缓存有效期(通常几分钟到几天) #### 三、建立TCP连接 1. **三次握手**: - 客户端发送`SYN=1, seq=x` - 服务端响应`SYN=1, ACK=1, seq=y, ack=x+1` - 客户端确认`ACK=1, seq=x+1, ack=y+1` 2. **HTTPS特殊处理**:额外进行TLS握手(约2-RTT) #### 四、发送HTTP请求 ```http GET / HTTP/1.1 Host: example.com User-Agent: Mozilla/5.0 Accept: text/html ``` - 现代浏览器默认使用HTTP/2协议(二进制分帧、头部压缩) #### 五、服务器处理 1. **负载均衡**:可能经过CDN节点或反向代理(如Nginx) 2. **动态生成**:PHP/Node.js等后端语言生成HTML 3. **响应返回**: ```http HTTP/1.1 200 OK Content-Type: text/html Cache-Control: max-age=3600 ``` #### 六、浏览器解析与渲染 1. **构建DOM树**: - 边下载HTML边解析 - 遇到`<script>`会阻塞解析(除非标记`async/defer`) 2. **构建CSSOM**: - 解析所有CSS文件(包括`@import`) - 遵循级联规则计算样式 3. **生成渲染树**: - 合并DOM和CSSOM,过滤不可见元素 - 计算布局(重排):$$width = content + padding + border$$ 4. **绘制与合成**: - 分层绘制 → 光栅化 → 合成图层 - 优化策略:仅更新脏矩形区域 #### 七、加载后续资源 1. **并行下载**:通常保持6-8个TCP连接 2. **优先级控制**: - CSS/字体 > 图片 > async脚本 - 使用`preload`预加载关键资源 #### 八、页面可交互 1. **事件绑定**:DOMContentLoaded事件触发 2. **持续优化**: - 空闲时预取后续页面资源 - 实施虚拟滚动等优化策略 #### 关键技术指标 - **FP**(First Paint):首次渲染时间(约1s内优秀) - **TTI**(Time to Interactive):可交互时间(约3s达标) - **LCP**(Largest Contentful Paint):最大内容渲染(2.5s内优秀) 整个过程涉及网络协议栈、渲染引擎、JavaScript引擎(如V8)等多个子系统的协作,现代浏览器通过多进程架构(每个标签页独立进程)保障安全性与稳定性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值