浏览器渲染流程详解
完整的浏览器渲染过程
1. 用户输入 URL
- 用户在地址栏输入URL或点击链接
- 浏览器检测输入内容并确定协议（HTTP/HTTPS等）
- 如果输入的是搜索词而非URL，浏览器会使用默认搜索引擎进行查询
2. DNS 解析
- 浏览器首先检查自身缓存中是否有对应域名的IP地址
- 如未找到，则向操作系统发起查询
- 若操作系统也无记录，则向DNS服务器发送请求
- 递归解析直到获得目标服务器的IP地址
3. TCP 连接 + TLS 握手
- 建立TCP连接（三次握手）
- 对于HTTPS请求，进行TLS握手：
- 客户端发送支持的TLS版本和加密算法
- 服务器返回数字证书和选择的加密算法
- 客户端验证证书有效性
- 双方协商生成会话密钥
4. 发送 HTTP 请求
- 浏览器构建HTTP请求报文
- 包括请求行、请求头、请求体
- 通过TCP连接发送到服务器
5. 接收 HTML 响应
- 服务器处理请求并返回HTML文档
- 浏览器接收响应数据
- 检查HTTP状态码确认请求成功
6. 解析 HTML → 构建 DOM
- 浏览器开始解析HTML标记
- 构建DOM树（Document Object Model）
- DOM树代表页面的结构化内容
- 在解析HTML的过程中，遇到外部资源（如CSS、图片）会并行加载，但遇到script标签（没有async/defer属性）时会阻塞解析，先下载并执行JS。
7. 加载 CSS → 构建 CSSOM
- 解析HTML过程中发现CSS资源（link标签、style标签、内联样式）
- 下载并解析CSS规则
- 构建CSSOM树（CSS Object Model）
- CSSOM树包含所有样式规则
8. 遇到 script标签 → 执行 JS
- 解析HTML过程中遇到script标签
- 默认情况下，脚本下载和执行会阻塞HTML解析
- 可通过async或defer属性改变行为
- JavaScript可以修改DOM和CSSOM
9. 构建 Render Tree
- 结合DOM树和CSSOM树
- 创建渲染树（Render Tree）
- 渲染树只包含视觉信息相关的节点（非display:none或head元素）
10. Layout 布局
- 计算渲染树中每个节点的精确位置和大小
- 这个过程也称为重排（Reflow）
- 确定页面上每个元素的确切位置
11. Paint 绘制
- 将渲染树中的每个节点转换为屏幕上的实际像素
- 创建视觉层（Visual Layers）
- 执行绘制操作，填充颜色、绘制文本、图像等
12. Composite 合成
- 将多个图层按照正确的层级顺序合成
- 利用GPU加速提高性能
- 将最终画面呈现给用户
13. DOMContentLoaded
- DOM文档完全加载和解析完成
- 不等待样式表、图像等资源加载
- 此时可以安全地访问DOM元素
14. 页面可见（几乎和DOMContentLoaded同步）
- 页面内容首次在屏幕上显示
- 用户可以看到部分或全部内容
15. Load
- 页面所有资源（包括图片、样式表等）完全加载完成
- window.onload事件触发
16. 用户可交互
- 所有资源加载完成
- 所有初始化脚本执行完毕
- 用户可以与页面完全交互
性能优化建议
- 关键渲染路径优化：减少关键资源数量，降低字节大小，缩短往返时间
- CSS优化：避免CSS阻塞，使用媒体查询条件加载
- JavaScript优化：合理使用async/defer，避免长时间运行脚本
- 资源预加载：使用preload、prefetch等技术优化资源加载
- 缓存策略：合理设置HTTP缓存头，利用浏览器缓存机制
注意事项
- 某些步骤可能会因资源异步加载而重新执行
- 动态内容更新可能导致部分渲染流程重复执行
- 现代浏览器使用各种优化技术（如预解析、预测加载等）提升性能