网页在浏览器中显示的原理（简要）

网页在浏览器中显示的过程是一个复杂的多阶段流程。

1. 输入URL并发起请求

• 用户在地址栏输入URL并回车

• 浏览器检查缓存（DNS缓存、页面缓存等）

• 如果没有缓存，通过DNS解析获取服务器IP地址

• 建立TCP连接（三次握手）

• 发送HTTP/HTTPS请求

2. 服务器响应

• 服务器处理请求并返回响应

• 返回的数据通常包括：

  • HTML文档（状态码200）

  • 重定向指令（3xx状态码）

  • 错误信息（4xx/5xx状态码）

3. 浏览器解析和构建DOM树

• 字节 → 字符：将接收的二进制数据转换为HTML字符串

• 标记化(Tokenizing)：将HTML字符串解析为标记(tokens)

• 构建DOM树：根据标记间的层级关系构建DOM树

  • 遇到<script>会暂停解析，执行JS代码（除非标记async/defer）

  • 遇到CSS会继续解析，但会阻塞渲染

4. 构建CSSOM树

• 解析CSS样式表，构建CSS对象模型(CSSOM)

• CSS解析是渲染阻塞的，浏览器会等到CSSOM构建完成才进行渲染

5. 构建渲染树(Render Tree)

• 结合DOM和CSSOM构建渲染树

• 只包含需要显示的元素（排除display:none的元素等）

6. 布局(Layout)/回流(Reflow)

• 计算每个渲染树节点的确切位置和大小（盒模型）

• 输出"盒模型"信息，确定每个节点在屏幕上的精确坐标

7. 绘制(Painting)

• 将布局计算的每个节点转换为屏幕上的实际像素

• 包括文本、颜色、边框、阴影等视觉效果的绘制

8. 合成(Compositing)

• 将各层绘制结果合成为最终页面

• 处理重叠元素的层级关系

• 应用GPU加速等优化技术

关键概念补充

关键渲染路径(Critical Rendering Path)

优化网页性能的核心就是优化关键渲染路径，即浏览器从接收HTML、CSS和JavaScript到渲染出像素的整个过程。

回流(Reflow)和重绘(Repaint)

• 回流：当元素的几何属性（位置、尺寸）发生变化时触发

• 重绘：当元素的外观属性（颜色、透明度等）改变但不影响布局时触发

• 回流必定引起重绘，重绘不一定引起回流

现代浏览器的优化

现代浏览器采用多种优化技术：

• 增量式DOM构建

• 异步加载和延迟执行脚本

• 硬件加速合成

• 预测性解析等

这个流程解释了为什么前端性能优化需要考虑HTML结构、CSS选择器复杂度、JS执行时机等因素，因为每个阶段都可能成为性能瓶颈。