一文掌握 CSS 图层与重排重绘

浏览器渲染机制的舞台：CSS图层

浏览器在渲染页面时，会将页面分为很多个图层，就像舞台上的一个个道具，每个图层上有一个或多个节点，代表了舞台上的各个元素。当浏览器渲染DOM时，所做的工作实际上是：

1. 获取DOM：浏览器从HTML和CSS文件中获取DOM树。
2. 分割为多个图层：浏览器将DOM树分割为多个图层，每个图层包含一组相关的元素。
3. 对每个图层的节点计算布局：浏览器计算每个图层上节点的位置和大小。
4. 绘制图层：浏览器将图层的内容绘制到屏幕上。

幕后推手：重排和重绘

浏览器在渲染页面的过程中，经常会遇到需要重排和重绘的情况，就像是舞台上的演员需要根据导演的指示调整位置和更换服装。重排是指浏览器需要重新计算元素的位置和大小，而重绘是指浏览器需要重新绘制元素的内容。

重排的常见原因：

• 元素的尺寸或位置发生改变。
• 元素的字体或颜色发生改变。
• 元素的可见性发生改变。
• 元素的层叠顺序发生改变。

重绘的常见原因：

• 元素的内容发生改变。
• 元素的背景颜色发生改变。
• 元素的边框发生改变。
• 元素的阴影发生改变。
• 元素的滤镜发生改变。

优化舞台效果：性能优化

重排和重绘是浏览器渲染页面的两个关键步骤，但它们也会影响页面的性能。因此，了解如何优化重排和重绘，可以有效提升网页的性能。以下是一些优化建议：

• 避免频繁修改元素的尺寸和位置。
• 避免频繁修改元素的字体和颜色。
• 避免频繁修改元素的可见性。
• 避免频繁修改元素的层叠顺序。
• 使用硬件加速。
• 合理使用CSS选择器。
• 避免使用过多的浮动元素。
• 避免使用过多的动画。

掌握舞台上的道具：图层叠放上下文

在CSS中，图层叠放上下文（stacking context）是一个非常重要的概念，就像舞台上的道具摆放顺序一样。它决定了元素在页面中是如何叠放的。图层叠放上下文可以分为以下几种类型：

• 根元素（root element）
• 块级元素（block-level element）
• 行内块级元素（inline-block element）
• 定位元素（positioned element）
• 弹性元素（flex element）
• 网格元素（grid element）

精雕细琢：CSS属性对图层的影响

CSS中的某些属性会影响元素所在的图层叠放上下文，从而改变元素在页面中的叠放顺序。这些属性包括：

• z-index
• 偏移量（offset）
• 父元素
• 可见性（visibility）
• transform
• opacity
• 混合模式（blend mode）

总结：舞台背后的秘密

CSS图层、重排和重绘是浏览器渲染页面的关键技术，掌握这些知识可以帮助我们优化网页的性能，提升用户体验。通过了解图层叠放上下文和CSS属性对图层的影响，我们可以更好地控制元素在页面中的位置和叠放顺序。只有充分理解浏览器渲染页面的机制，才能在舞台上呈现出精彩的表演。