浏览器的渲染流程
当你在浏览器地址栏输入一个 URL（比如 https://www.example.com）并回车，到页面最终展示出来，这个过程中浏览器和底层网络都发生了什么？
这个问题考察的是对整个前端链路的理解程度。我希望你能按照时间顺序，描述出关键的几个步骤。
这个过程分为三个阶段：网络请求阶段、解析渲染阶段、合成展示阶段。
第一阶段：网络请求阶段，主要在浏览器网络进程进行
- 浏览器解析url和输入处理
- 先判断URL是否合法，如果不合法，浏览器会进行纠错补全，然后进行编码，如果有中文等非ascll码，进行转码
- dns域名解析拿到IP
- 依次检查浏览器缓存、系统缓存、路由器缓存
- 如果都没有，浏览器发请求给DNS服务商（根域名、顶级域名、权威域名），最终查询到目标IP
- 进行TCP链接，建立可靠连接
- 与服务器进行三次握手（SYN/ACK），保证拥有最基础的通信能力
- 如果是HTTPS，TCP连接后还会进行TLS/SSL握手，建立加密连接
- 发送HTTP请求
- 浏览器构建HTTP请求报文（包含请求行、请求头、空行、请求体、空行）
- 通过网络层封装成IP包，数据链路层封装成帧，通过物理层发送给服务器
- 服务器处理请求和响应
- 服务器收到请求后，处理逻辑，然后返回HTTP响应报文
第二阶段：解析与渲染阶段，在浏览器渲染进程进行
浏览器接收到响应数据，开始解析HTML，构建骨架
- 浏览器逐个解析HTML标签，转成节点，生成DOM树
- 如果如果遇到script标签且没有资源提示符defer或者async属性，渲染引擎会暂停HTML解析，转而下载并执行脚本（因为脚本可能会修改DOM）。这是导致页面加载慢的常见原因之一
解析CSS，构建CSSOM树
执行JS
- 解析HTML过程中，遇到JS代码就执行
将DOM树和CSSOM树合并，构建渲染树
- 保留DOM树可见节点和忽略被CSS隐藏的节点
计算位置，进行布局（Layout/Reflow）
- 浏览器从渲染树的根节点开始遍历，计算每个元素的位置
绘制（Paint）
- 根据计算计算好的布局，将元素绘制出来
- 该过程通常在一个图层上进行，填充像素信息
第三阶段：合成和展示阶段
- 合成
- 将各个图层按照正确的数序和位置叠加在一起，最终生成一张图片
- 不是所有元素都在一个层。现代浏览器为了提升性能，会将复杂的元素（如视频、3D 变换、滚动条等）提升到单独的合成层。这是利用 GPU 加速的核心原，将复杂的重绘任务交给 GPU 处理，减少 CPU 的压力。这样即使某一层发生变化，也不需要重绘整个页面，只需要合成该层即可。
- 显示
- 浏览器将合成好的图像交给GPU，GPU负责将图片绘制到屏幕上
- Load事件
- 当页面上所有的资源都加载完毕后，触发window.onload事件，代表页面加载完成
性能优化的核心目标，就是缩短这条路径的总时长（比如优化请求响应、减少 DOM 节点数、避免强制同步布局、利用 GPU 加速等）。