浏览器从输入 URL 到页面渲染的完整流程是什么？

浏览器从输入 URL 到页面渲染的完整流程是一个涉及网络通信、资源解析、渲染引擎协作的复杂过程。以下是基于资料整合的 7 个核心阶段的详细流程，每个阶段均标注引用来源：

---

一、URL 解析与预处理（ ）

1. 输入校验
   • 浏览器判断输入是合法 URL 还是搜索关键词。非法字符会被编码（如空格转为 %20），非完整 URL 自动补全协议（如 http://）。
   • 若为 HTTPS，强制启用加密连接（避免中间人攻击）。
2. 安全策略
   • 检查 HSTS 列表（强制 HTTPS）、Cookie 策略等，拦截高风险请求（如恶意网站）。

---

二、DNS 解析（ ）

1. 缓存查询顺序

   浏览器缓存

   系统 Hosts 文件

   本地 DNS 缓存

   ISP DNS 服务器

2. 递归查询流程（未命中缓存时）

   • 本地 DNS 服务器依次查询： 根 DNS → 顶级域 DNS（.com）→ 权威 DNS（example.com） ，最终返回 IP 地址。
   • 结果缓存至各级 DNS（TTL 决定有效期）。

---

三、TCP 连接与安全协商（ ）

1. TCP 三次握手
   • SYN（客户端） → SYN+ACK（服务端） → ACK（客户端）。
2. TLS 握手（HTTPS）
   • 协商加密算法，验证证书合法性，生成会话密钥（如 ECDHE 密钥交换）。
   • 优化点：会话复用（Session ID/Tickets）减少握手延迟。

---

四、HTTP 请求与响应（ ）

1.请求报文结构

GET /index.html HTTP/1.1
Host: example.com
User-Agent: Chrome/125.0
Accept: text/html

1. • 方法（GET/POST）、URI、协议版本、头部（缓存控制/身份认证）、正文（POST 数据）。

2. 响应处理

   • 状态码（200 OK/404 Not Found）、响应头（Content-Type/Cache-Control）、正文（HTML/CSS/JS）。
   • 连接管理：HTTP/1.1 默认 Connection: keep-alive 复用 TCP 连接。

---

五、渲染引擎解析与资源处理（ ）

1. DOM 树构建
   • 词法分析：HTML 解析器将字节流转为 Token（标签/属性/文本）。
   • 语法分析：根据 Token 构建 DOM 节点，通过栈结构处理标签嵌套（如未闭合标签自动修复）。
2. CSSOM 树构建
   • 解析 CSS 规则，计算层叠样式（继承父节点 → 应用自身规则）。
   • 阻塞渲染：CSS 未加载完成前，页面保持空白（避免 FOUC）。
3. JavaScript 执行影响
   • 同步脚本阻塞 DOM 解析（需等待脚本下载/执行）。
   • 若脚本操作 CSSOM，需等待 CSS 加载完成（  ）。

---

六、渲染树生成与布局绘制（ ）

1. 渲染树（Render Tree）合成
   • 合并 DOM + CSSOM，排除不可见节点（如 display: none）。
2. 布局（Layout/Reflow）
   • 计算节点精确坐标/尺寸（视口大小、浮动定位等影响）。
   • 性能瓶颈：频繁 JS 操作 DOM 触发重排（如修改元素位置）。
3. 绘制（Painting）与合成
   • 分层：对复杂效果（transform/opacity）创建独立图层。
   • 栅格化：将图层分块转为位图（GPU 加速）。
   • 合成显示：合并图层输出至屏幕。

---

七、连接释放与后续处理（ ）

1. TCP 四次挥手
   • FIN（客户端） → ACK（服务端） → FIN（服务端） → ACK（客户端）。
2. 资源缓存
   • 强缓存（Cache-Control/Expires）与协商缓存（ETag/Last-Modified）减少重复请求。
3. 事件触发
   • DOMContentLoaded：DOM 解析完成时触发。
   • load：页面所有资源（图片/脚本）加载完成后触发。

---

关键优化策略（ ）

阶段	优化手段	效果
DNS	DNS 预读取（dns-prefetch）	减少域名解析延迟
TCP	TCP 快速打开（TFO）	加速握手
HTTP	HTTP/2 多路复用 + 头部压缩	提升并发效率
渲染	异步脚本（async/defer）	避免阻塞 DOM/CSSOM 构建
绘制	避免强制同步布局（读写分离）	减少重排次数
资源加载	懒加载图片 + CDN 分发	缩短首屏时间

---

浏览器渲染引擎分工（ ）

模块	职责
HTML 解析器	构建 DOM 树
CSS 解析器	生成 CSSOM 树
JavaScript 引擎	执行脚本，操作 DOM/CSSOM
布局模块	计算节点几何信息
绘图模块	将布局结果转换为屏幕像素

协同机制：GUI 渲染线程与 JS 引擎线程互斥，JS 执行会阻塞渲染（Web Worker 可解耦）。

---

此流程覆盖了从网络层到渲染层的完整链路，深入解释了各阶段的阻塞关系、性能瓶颈及优化方案。实际场景可能因浏览器架构（如 Chromium 多进程模型）或页面复杂度存在差异，但核心机制保持一致。