本文详细介绍了网页渲染过程，包括HTML和CSS的处理、styleSheets的作用，以及如何构建Render树、计算布局、绘制paint和分层机制。特别强调了CSS如何影响DOM构建，以及合成层在性能优化中的关键作用。最后提到了前端开发的学习资源推荐。
与HTML文本一样，渲染引擎也没法直接理解CSS文本，因此渲染引擎会将其转换为其能理解的结构——styleSheets。在控制台执行document.styleSheets 可以看到：
styleSheets是对页面样式的一个总览，其内部层级如下图：
关于stylesheets的具体属性，可参考链接[3]
针对styleSheets，结合CSS的继承、优先级层叠等规则，渲染引擎最终生成如下CSS规则树：
此时每个元素上的样式就是最终应用这个元素上的样式了，通过浏览器的Element->Computed可以查看。
3、布局Layout
页面结构和页面样式都确定了，接下来就需要将两者结合起来，对页面进行整体布局。
3.1构建Render树
DOM树只是描述了源码中HTML的结构，但其中许多元素并不需要展示在画面中（比如head、dispaly:none），也有一些不存在DOM树中但需要显示在页面上的元素（比如伪类），因此在显示之前需要遍历DOM树中的所有节点，忽略掉不可见元素，添加不存在DOM树中但需要显示的的内容，最终生成一棵只包含可见元素的Render树。
3.2计算布局信息
以上得到了每个DOM元素的文档结构和样式，但是还不知道元素的具体绝对几何位置。
比如一个div元素的样式如下：
div {
position: absolute;
width:100px;
height:100px;
top:10px;
left:10px;
}
那么我们还需要知道它的具体绝对几何位置：
div {
x: ?
y: ?
width: 100px
height: 100px
}
而计算元素的具体绝对几何位置是一项艰巨的任务，因为即使是最简单的页面布局（如从上到下的块流程）也必须考虑字体的大小以及在何处换行，因为这会影响段落的大小和形状，也会影响下一段的位置。
在Chrome中，有一整个工程师团队在为布局而工作， few talks from BlinkOn Conference[4] 有提到一些，大家感兴趣可以看看。
4、绘制paint
以上得到了完整的Render树，也就是知道了页面的样式和位置信息，但还没到绘制的时候。类似于画一幅画，我们还需要知道页面各元素的绘制顺序，比如需要先画蓝天再画白云，否则白云会被蓝天覆盖住。
针对绘制顺序，因为页面中有很多复杂的效果，如一些复杂的 3D 变换、页面滚动，或者使用 z-index做 z 轴排序等，为了更加方便地实现这些效果，渲染引擎采用了分层机制。
4.1分层layer
每个DOM元素会有自己的布局信息Layout Object， 根据其布局信息的层级等关系，某些Layout Object会拥有共同的渲染层Paint Layer，某些Paint Layer又会拥有共同的合成层Composite Layer(Graphic Layers)。
分层-渲染层（Paint Layer）
如上图，DOM 树中得每个 Node 节点都有一个对应的 LayoutObject；拥有相同的坐标空间的 LayoutObjects，属于同一个渲染层（PaintLayer）。渲染层产生的最普遍条件是“层叠上下文”。
层叠上下文示意图：
根据层叠上下文-MDN[5]，层叠上下文由满足以下任意一个条件的元素形成：
满足以上任一条件的元素，都会拥有自己的渲染层，其子元素若没有单独的渲染层，则随父级元素同一层。
其他产生渲染层的特殊场景（除“层叠上下文”），可参考链接[6]
分层-合成层(Composite Layer)
某些特殊的渲染层会被认为是合成层（Composite Layer），合成层拥有单独的 GraphicsLayer。渲染层与合成层的区别，如图：
产生合成层的具体条件可参考文章，这里列出几个常见的场景：
-
有 3D transform
-
对 opacity、fliter、transform 应用了 animation 或者 transition（需要是 active 的 animation 或者 transition，当 animation 或者 transition 效果未开始或结束后，提升合成层也会失效）
-
will-change 设置为 opacity、transform、top、left、bottom、right（其中 top、left 等需要设置明确的定位属性，如 relative 等
以上三种原因生成合成层demo代码如下
在控制台的Layers下，可以看到合成层。
- overlap：元素覆盖在其他合成层元素上，则该元素被隐式提升为合成层，demo代码如下
demo中的上层div，本不具备提升为合成层的因素，但由于其覆盖在了下层div上，如果上层div不隐式提升为合成层，它就会和和父元素共用一个合成层，此时渲染顺序就会出错。为了保证渲染顺序，因此上层被隐式提升为合成层。在控制台也可以看到原因：might overlap other composited content.
渲染层是为保证页面元素以正确的顺序，合成层是为了减少渲染的开销。
提升为合成层的好处：
-
合成层的位图，会采用硬件加速，也就是会交由 GPU 合成，比 CPU 处理要快
-
当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
-
对于已提升为合成层中的 transform 和 opacity 效果，都只是几何变换，透明度变换等，不会触发 layout 和 paint，直接由GPU完成即可
因此，在开发中，建议对于需要频繁移动的元素，建议将其提升为单独的合成层，可减少不必要的重绘，同时可以利用硬件加速，提高渲染效率。
4.2层绘制paint
分好层后，就需要对每个层进行绘制了。绘制并不是一蹴而就，而是像画画一样，是按顺序一笔一笔画出来的，渲染引擎也是类似。对于每一个合成层，渲染引擎的渲染过程：
-
先绘制下面的渲染层，再绘制上面的渲染层；
-
在绘制一个渲染层时，将一个渲染层的绘制拆分成很多小的绘制指令。
常见的指令如下：
-
drawReact(rect, paint)：使用paint画一个矩形rect
-
drawTextBlob(x,y,paint)：使用paint以x、y为起始坐标绘制文字
-
drawPaint(paint)：用paint填充画布
-
color：采用ARGB的方式
各指令的含义可参考链接[7]
打开“开发者工具”的“Layers”标签，任意选择一层合成层，可查看该层detail下的详细渲染列表paint profiler。绘制指令demo代码如下
合成层一
合成层二
比如选择composite-1的合成层，绘制列表如下：
这里顺便也可以看到一点：渲染层2在渲染层1的后面，但由于其z-index较大（说明其渲染层层级较高），因此优先渲染层2。
需要说明一点，绘制列表只是用来记录绘制顺序和绘制指令的列表，并没有真正的绘制出页面。
4.3栅格化
生成了绘制指令，就到了真正绘制页面的时候了，真正的绘制过程不是在主线程完成的，而是在得到绘制指令后，主线程会将这些信息交给合成线程，由合成线程来完成绘制。
合成线程是如何工作的呢？
页面可能很大，但用户只能看到一部分，在这种情况下如果全部绘制，就会产生很大的性能开销，因此需要优先绘制视口（即用户看到的区域）区域内的元素。
基于此原因，绘制前，合成线程会对页面进行分块，然后将每个图块发送给栅格线程，栅格线程将图块转换为位图。合成器线程可以优先处理不同的栅格线程，这样就可以首先对视口（或附近）中的事物进行栅格化。
通常，栅格化过程都会使用 GPU 来加速生成，生成的位图被保存在 GPU 内存中。
栅格化的过程：
5、合成与显示
栅格化完成后，每一个图层都对应一张“图片”，合成线程会将这些图片合成为一张“图片”。此时，页面数据已经完成绘制，现在只需要显示给用户即可，此时就需要显卡和显示器就上场了。
显卡分为前缓冲区和后缓冲区，合成线程生成的“图片”会被发送至后缓冲区。显卡对图片进行处理完成后，系统就会让后缓冲区和前缓冲区互换，这样显示器就总能读到显卡最新产生的数据了。
通常显卡和显示器的刷新频率是一致的，都会60次/秒，但对于一些复杂的场景，显卡处理速度比较慢，显卡的刷新频率就会低于显示器，此时页面就会出现卡顿现象。
因此在开发中，我们需要尽量保证一帧画面的处理总时长（以上的所有步骤）不超过1/60s = 16.7ms，这样画面才不会出现卡顿现象。不过量化地衡量渲染时间比较困难，但基于以上分析的渲染过程，我们就可以从渲染的各个步骤着手优化渲染流程，提高渲染效率。
6、相关拓展
6.1 CSS如何影响DOM的构建
JavaScript脚本由于可能会修改DOM，因此会阻塞DOM的构建，这一点我们都知道；而CSS并不会操作或者改变DOM，因此通常我们认为CSS不会影响DOM的构建，只会影响后续的布局、绘制等过程，即会影响DOM的渲染。但其实CSS可以通过JavaScript来阻塞DOM的构建。
因为JavaScript是可以改变样式的，也就是具有修改CSS规则树的能力，而JavaScript脚本里是否有改变样式的操作，这一点在执行JavaScript之前是不可知的。因此，为保证JavaScript脚本的正确执行，在执行JavaScript之前，CSS规则树必须要先准备好（不然万一有修改CSS的操作呢）。
也就是说，若在构建DOM的中途存在阻塞DOM构建的JavaScript脚本，而此页面中还包含了外部 CSS 文件的引用，那么此时就需要等目前的CSS规则树（基于目前生成完的部分DOM树）构建完毕后，再开始JavaScript脚本的执行，等一切结束了，再继续DOM的构建。
整个流程如图：（其中CSSOM表示CSS规则树）
demo代码如下：
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
eb前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**
[外链图片转存中…(img-I2GJlZBn-1713004609790)]
[外链图片转存中…(img-mqj1J9kv-1713004609791)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
[外链图片转存中…(img-utB5xGt7-1713004609791)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
扫一扫
2467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
