HTML、CSS和JavaScript，是如何变成页面的？

渲染过程：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成

（一）浏览器不能直接理解HTML数据，需通过HTML解析器解析成DOM树结构存放在内存中

（二）样式计算是为了计算出DOM节点中每个元素的具体样式（分为三步完成）

（1）把css转换为浏览器能理解的结构（通过css解析器）解析后的结构同样存放在内存中，可通过document.styleSheets查看

（2）转换样式表中的属性值，使其标准化：

（3）计算DOM树中每个节点的具体样式（需根据css的继承和层叠规则），这个过程输出的内容是每个DOM节点的样式，并保存在ComputedStyle结构中

（三）布局阶段：创建布局树和布局计算

布局树构造过程示意图

布局计算：计算布局树中相对节点的坐标位置

（四）分层：3D变换或者使用z-indexing做Z轴等渲染引擎还需要为特定的节点生成专用图层，并生成一棵对应的图层树（类似ps图层浏览器的页面实际上被分成了很多图层，这些图层叠加后合成最终的页面）

（五）图层绘制：

（1）渲染引擎会把一个图层的绘制成很小的指令然后按顺序组成一个待绘列表

把（五）步生成的待绘列表交给渲染引擎中的 合成线程 完成，由于屏幕视口较小，而页面通常较大（为了减小开销，合成线程会把图层分成图块（title））

当图层的绘制列表准备好之后，主线程会把该绘制列表提交（commit）给合成线程

（六）光栅化（将图块转化为位图）

合成线程会按照视口附近的图块优先生成位图（图块是栅格化执行的最小单位）通常栅格化会使用GPU进程进行加速，生成的位图保存在GPU中 

（七）合成和显示

当所有的图块栅格化之后，合成线程会发送给浏览器，将其页面绘制在内存中，最终再将内存显示在屏幕上