渲染过程：HTML、CSS和JavaScript是如何转换成网页？

文章目录

• • • • • 1.构建 DOM 树
    • 2. 样式计算（Recalculate Style）
    • 3. 布局阶段
    • • 3.1 创建布局树
      • 3.2 布局计算

4层次划分
5层次渲染
6栅格处理：(raster操作)
7合成与呈现
8渲染管道综述：大总结可考虑优化为更专业的表述
9相关内容：
9.1修改了元素的几何参数（重排）
9.2修改了元素的视觉表现（重绘）
9.3直接合成环节

从输入URL到页面展示，这中间发生了什么？

一般情况下，在屏幕上呈现漂亮的页面（如图所示），我们知道这些网页是如何生成页面的吗？估计很少人能够回答这个问题。

​

通过查看图表可以看出，在左侧接收了HTML、CSS和JavaScript数据。这些数据在中间渲染模块中被处理后，在屏幕上呈现为像素点的形式。

这个核心部分就是我们今天重点探讨的内容。为了更好地理解后续内容，请先通过下图快速掌握HTML、CSS以及JavaScript的基本概念：

![i