大家好，我是念念！这篇文章是关于浏览器渲染中的“分层”和硬件加速的。我会澄清：什么是硬件加速？合成层的“层”与堆叠上下文的“层”是否相同？什么是层爆炸和层压缩？据说可以减少回流和重绘，如何使用硬件加速来实现？页面渲染的过程首先，我们来回顾一个老套路：页面渲染的过程。简单的说，在第一次渲染的时候会按照下面的步骤来构建DOM树；风格计算；布局定位；层分层；图层绘制；复合显示；当改变CSS属性时，重新渲染会分为“回流”、“重绘”和“直接合成”三种情况，分别从“布局定位”/“图层绘制”/“合成显示”开始，以及然后走上面的流程。一个元素的CSS会发生什么，取决于它属于以上哪种情况：reflow（也叫重排）：元素的位置和大小的变化导致其他节点被链接，需要重新计算布局；重绘：一些不影响布局属性的改变，比如颜色；直接合成：修改合成图层的transform和opacity，只需要再次合并多个图层，然后生成位图，最后显示在屏幕上；上面提到的渲染中的图层在渲染过程中会发生“图层分层”。浏览器中有两种层：“渲染层”和“合成层（也叫合成层）”。很多文章还提到了一个概念叫“图形层”，其实也可以看成是复合层。为了降低理解成本，本文使用“渲染层”和“合成层”这两个术语来描述。开发者工具中的Layers首先直观感受“层”，打开浏览器开发者工具的layers：可以看到AB元素都在最底层，元素C是单独的一层，元素D是层。<样式>正文{边距：0;填充：0；}.box{宽度：100px；高度：100px；背景：rgba（240、163、163、0.4）；边框：1px纯粉色；边界半径：10px；文本对齐：居中；}#a{}#b{位置：绝对；顶部：0；左：80；z-指数：2；}#c{位置：绝对；顶部：0；左：160；指数：3；转换：translateZ(0)；}#d{位置：绝对；顶部：0；左：240；z-指数：4；}.description{字体大小：10px；}
