下面用一个图来简单表示一下页面渲染过程：
网页内容一开始，可能需要网络模块进行获取，并使用存储模块进行缓存。因此，可能会使用网络模块，使用虚线表示，其他虚线用处相同。网页内容先通过 HTML解释器解析出DOM树，该DOM直到网页销毁前会一直存在。在解析过程中可能会遇到css代码，使用css解释器对其进行解析，将对应的元素进行计算和渲染。遇到异步的JS，会停止构建，直到加载并执行完JS代码后再继续构建。 在HTML、CSS、JS解释执行完毕后，会进入一个内部表示的状态，每个元素此时都是一个拥有样式的独立个体，然后通过调用布局、绘制，将页面进行组装，并且替换之前的占位内容，使用相应的加载器进行绘制。最终生成图像展现给用户。
渲染出来的页面一般会放在一个渲染层上，但在有`<video>、<audio>、<canvas>`等媒体标签会建立新的渲染层进行单独渲染。主要是浏览器对其进行数据交互更为方便，效率更高。当然，css进行动画操作时也会触发这种建立新渲染层的机制。 我们可以通过对Chrome中的 `More Tools > Rendering > Layer border`打钩，进行渲染图层的展示。测试代码如下：
<html>
<body>
<div style=“-webkit-transform: rotateY(30deg) rotateX(-30deg); width: 200px;”>
I am a strange root.
</div>
</body>
</html>效果如下：
原文：https://www.cnblogs.com/miku561/p/12533952.html
