点击解密：从 URL 到页面渲染的前世今生（今生篇）

从 URL 到页面渲染的前世今生（今生篇）

前世篇回顾：前端代码的由来

在上篇文章中，我们探讨了浏览器从接收 URL 到获取前端代码的过程，犹如一幅长卷，将前世的故事娓娓道来。前端代码，如同一个个字符的舞者，在网络的舞台上翩翩起舞，最终抵达浏览器怀中。

今生篇启幕：代码如何变身网页

当浏览器拿到前端代码后，精彩的旅程才刚刚开始。代码，这些冰冷的符号，如何华丽转身，变身为我们所见所感的网页？这就是今生篇要讲述的故事。

1. DOM 树的构建：将 HTML 代码转化为树状结构

浏览器首先会将 HTML 代码解析成 DOM 树（Document Object Model Tree）。DOM 树是一种树形结构，它将 HTML 文档中的元素及其层级关系一一对应。DOM 树的构建过程，就好似一棵大树的生长，从根节点开始，逐层展开，直到所有的元素都归于其位。

2. CSSOM 树的构建：样式的盛宴

有了 DOM 树，浏览器接下来需要做的就是为网页穿上美丽的衣裳。于是，它将 CSS 样式表解析成 CSSOM 树（Cascading Style Sheets Object Model Tree）。CSSOM 树中包含了所有的样式信息，这些信息将与 DOM 树中的元素一一对应，为网页增添色彩和布局。

3. 渲染树的生成：构建可视化的骨架

当 DOM 树和 CSSOM 树构建完毕后，浏览器会将它们合并成渲染树（Render Tree）。渲染树是网页可视化布局的基础，它决定了网页中各个元素的具体位置和大小。渲染树的生成过程，就好似建筑师绘制蓝图，为网页的视觉呈现打下坚实的基础。

4. 布局：元素在页面中的定位

有了渲染树，浏览器就可以开始布局了。布局的过程，就是根据渲染树中的信息，计算每个元素在页面中的确切位置和大小。浏览器会根据元素的属性、父元素的属性以及 CSS 样式等因素，确定每个元素的布局。

5. 绘制：将像素点变为图像

布局完成后，浏览器会将渲染树中的元素逐一绘制到屏幕上。绘制的过程，就是将元素的形状、颜色和纹理等信息转化为像素点，然后在屏幕上显示出来。浏览器会使用各种各样的算法和技术来优化绘制过程，确保网页能够流畅、清晰地呈现。

6. 重绘与重排：网页动态变化的幕后英雄

当网页的内容发生变化时，浏览器会重新计算渲染树、布局和绘制，这个过程称为重排（reflow）。如果只有部分元素发生变化，浏览器可能会只重新计算和绘制受影响的部分，这个过程称为重绘（repaint）。重绘和重排是网页动态变化的幕后功臣，它们确保了网页能够及时响应用户的操作和动态内容的变化。

结语：从代码到网页，一场视觉盛宴的诞生

从 URL 到页面渲染，是一个复杂而精妙的过程，它涉及到浏览器、网络、代码、算法等多个方面。通过了解这个过程，我们能够更好地理解网页是如何工作的，以及如何优化网页的性能。