CSS绘制风暴（Paint Storms）：复杂阴影与圆角导致的全层重绘分析 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

CSS 绘制风暴：复杂阴影与圆角导致的全层重绘分析

大家好，今天我们来深入探讨一个在前端性能优化中经常遇到的问题：CSS 绘制风暴，以及复杂阴影和圆角对全层重绘的影响。很多时候，我们精心设计的界面在低端设备上表现糟糕，往往就与这些看似简单的 CSS 属性息息相关。我们将从浏览器的渲染机制入手，逐步分析问题产生的原因，并提供相应的优化策略。

浏览器的渲染机制：理解重绘与重排

要理解 CSS 绘制风暴，首先需要了解浏览器的渲染机制。简单来说，一个网页的渲染过程可以分为以下几个主要步骤：

解析 HTML： 浏览器解析 HTML 代码，构建 DOM (Document Object Model) 树。
解析 CSS： 浏览器解析 CSS 代码，构建 CSSOM (CSS Object Model) 树。
构建渲染树： 浏览器将 DOM 树和 CSSOM 树合并，构建渲染树 (Render Tree)。渲染树只包含需要显示的节点，例如 display: none 的元素就不会出现在渲染树中。
布局 (Layout/Reflow)： 浏览器根据渲染树计算每个节点在屏幕上的位置和大小。
绘制 (Paint/Repaint)： 浏览器将渲染树中的节点绘制到屏幕上。
合成 (Composite)： 将多个图层合并成最终的图像。

在这个过程中，有两个关键概念需要理解：

重排 (Reflow)： 当 DOM 元素的几何属性发生变化时（例如位置、大小、边距等），浏览器需要重新计算元素的布局，这个过程称为重排。重排必然会导致重绘。
重绘 (Repaint)： 当 DOM 元素的样式属性发生变化，但不会影响其几何属性时（例如颜色、背景色等），浏览器只需要重新绘制元素，这个过程称为重绘。

重排的开销远大于重绘，因为它涉及到更多计算。任何触发重排的操作都会导致整个渲染树的重新计算，而重绘通常只影响单个元素或其周围的区域。

CSS 绘制风暴：性能瓶颈的根源

CSS 绘制风暴指的是由于不合理的 CSS 样式设置，导致浏览器频繁地进行重绘甚至重排，从而严重影响页面性能的现象。它通常表现为页面卡顿、响应缓慢等问题。

以下是一些常见的导致 CSS 绘制风暴的原因：

频繁的 DOM 操作： 修改 DOM 结构会导致重排，如果频繁修改 DOM，就会导致频繁的重排。
强制同步布局 (Forced Synchronous Layout)： 在 JavaScript 中读取某些会触发布局的属性（例如 offsetWidth、offsetHeight、offsetTop 等）时，如果在此之前有样式的修改，浏览器为了返回最新的值，会强制进行一次布局，这称为强制同步布局。
布局抖动 (Layout Thrashing)： 在循环中频繁读取会触发布局的属性并修改样式，会导致浏览器在每次循环迭代中都进行一次布局，这称为布局抖动。
复杂的 CSS 样式： 某些 CSS 属性的计算开销较大，例如 box-shadow、border-radius、filter 等，如果大量使用这些属性，会显著增加绘制时间。

今天我们重点讨论复杂阴影和圆角对性能的影响。

复杂阴影对性能的影响：GPU 的压力

box-shadow 属性可以为元素添加阴影效果，但其计算开销相对较大，尤其是当阴影的模糊半径较大、阴影层数较多时。

为什么 box-shadow 会影响性能？

计算复杂度： 浏览器需要计算阴影的形状、大小、颜色和模糊效果。对于复杂的阴影效果，计算量会显著增加。
GPU 渲染： 阴影效果通常需要使用 GPU 进行渲染，如果 GPU 压力过大，会导致帧率下降，页面卡顿。
潜在的全层重绘： 如果阴影影响的区域较大，或者阴影元素层级较高，可能会导致浏览器进行全层重绘。

代码示例：

.shadow-box {
  width: 200px;
  height: 100px;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* 相对较轻的阴影 */
}

.heavy-shadow-box {
  width: 200px;
  height: 100px;
  background-color: #fff;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); /* 高模糊半径的阴影 */
}

.multi-shadow-box {
  width: 200px;
  height: 100px;
  background-color: #fff;
  box-shadow:
    0 0 10px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(0, 0, 0, 0.15),
    0 0 30px rgba(0, 0, 0, 0.1); /* 多层阴影 */
}

在低端设备上，heavy-shadow-box 和 multi-shadow-box 可能会导致明显的性能下降。

如何优化 box-shadow？

减少阴影层数： 尽量使用单层阴影，避免使用多层阴影。
降低模糊半径： 降低阴影的模糊半径可以显著减少计算量。
使用 CSS 变量： 将阴影颜色和透明度定义为 CSS 变量，方便统一管理和修改，并避免重复计算。
使用伪元素模拟阴影： 对于简单的阴影效果，可以使用伪元素 (::before 或 ::after) 配合 transform 和 filter: blur() 来模拟阴影，这种方法可能比 box-shadow 更高效。
开启硬件加速： 通过添加 transform: translateZ(0); 或 will-change: transform; 等 CSS 属性，可以强制开启硬件加速，将阴影的渲染交给 GPU 处理，从而提高性能。但需要注意，过度使用硬件加速可能会导致其他问题，例如增加内存消耗。
考虑使用 SVG 阴影： 对于复杂的阴影效果，可以使用 SVG 滤镜来实现，SVG 滤镜通常比 CSS 阴影更灵活，并且在某些情况下性能更好。

伪元素模拟阴影示例：

.pseudo-shadow-box {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #fff;
  overflow: hidden; /* 隐藏伪元素的溢出部分 */
}

.pseudo-shadow-box::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 190px;
  height: 90px;
  background-color: rgba(0, 0, 0, 0.2);
  filter: blur(10px); /* 使用 blur 滤镜模拟模糊效果 */
  z-index: -1; /* 将伪元素置于底层 */
}

圆角对性能的影响：光栅化与抗锯齿

border-radius 属性可以为元素添加圆角效果，但同样存在性能问题，尤其是在元素尺寸较大、圆角半径较大时。

为什么 border-radius 会影响性能？

光栅化： 浏览器需要将圆角区域光栅化成像素，这个过程需要消耗 CPU 或 GPU 资源。
抗锯齿： 为了使圆角边缘更加平滑，浏览器需要进行抗锯齿处理，这也会增加计算量。
图层合成： 如果圆角元素与其他元素重叠，浏览器可能需要创建新的图层进行合成，这会增加内存消耗和绘制时间。
潜在的全层重绘： 类似于阴影，如果圆角元素层级较高，或者圆角半径过大，可能会触发全层重绘。

代码示例：

.rounded-box {
  width: 200px;
  height: 100px;
  background-color: #fff;
  border-radius: 10px; /* 较小的圆角 */
}

.heavy-rounded-box {
  width: 200px;
  height: 100px;
  background-color: #fff;
  border-radius: 50%; /* 大圆角，接近圆形 */
}

.large-rounded-box {
  width: 500px;
  height: 300px;
  background-color: #fff;
  border-radius: 50px; /* 大尺寸元素的圆角 */
}

在高分辨率屏幕或低端设备上，heavy-rounded-box 和 large-rounded-box 可能会导致性能问题。

如何优化 border-radius？

避免过度使用圆角： 只在必要的地方使用圆角，避免在所有元素上都添加圆角。
控制圆角半径： 尽量使用较小的圆角半径，避免使用过大的圆角半径。
使用 CSS 变量： 将圆角半径定义为 CSS 变量，方便统一管理和修改。
使用图片代替圆角： 对于某些特定的圆角效果，可以使用图片代替 CSS 圆角，例如使用 PNG 图片作为背景。
开启硬件加速： 与阴影类似，可以通过添加 transform: translateZ(0); 或 will-change: transform; 等 CSS 属性，强制开启硬件加速，将圆角的渲染交给 GPU 处理。
使用 clip-path： 对于复杂的圆角形状，可以使用 clip-path 属性来定义裁剪区域，clip-path 通常比 border-radius 更灵活，并且在某些情况下性能更好。但需要注意，clip-path 的兼容性不如 border-radius。

clip-path 实现圆角示例：

.clip-path-box {
  width: 200px;
  height: 100px;
  background-color: #fff;
  clip-path: round(10px); /* 使用 round() 函数定义圆角 */
  -webkit-clip-path: round(10px); /* 兼容旧版本浏览器 */
}

clip-path 实现更复杂的圆角示例：

.complex-clip-path-box {
    width: 200px;
    height: 100px;
    background-color: #fff;
    clip-path: polygon(
        20px 0,
        calc(100% - 20px) 0,
        100% 20px,
        100% calc(100% - 20px),
        calc(100% - 20px) 100%,
        20px 100%,
        0 calc(100% - 20px),
        0 20px
    );
}

全层重绘：性能杀手

全层重绘指的是浏览器需要重新绘制整个页面的内容。这是最昂贵的重绘操作，因为它涉及到所有元素的重新渲染。

什么情况下会触发全层重绘？

修改 <html> 或 <body> 元素的样式： 修改根元素的样式会影响整个页面的布局和绘制。
修改 viewport 的大小： 当用户缩放页面或改变窗口大小时，浏览器需要重新计算页面的布局和绘制。
修改 CSS 属性，影响范围超出当前元素： 例如修改 font-size 或 line-height 等属性，可能会影响整个页面的文本布局。
某些复杂的 CSS 效果： 例如大面积的模糊效果、复杂的阴影效果、大尺寸元素的圆角效果等，可能会触发全层重绘。
强制硬件加速不当： 过度使用硬件加速可能会导致图层爆炸，从而触发全层重绘。

如何避免全层重绘？

尽量避免修改 <html> 或 <body> 元素的样式。
优化 CSS 选择器： 避免使用过于宽泛的 CSS 选择器，例如 * 或 body > *，尽量使用具体的类名或 ID 选择器。
使用 will-change 属性： will-change 属性可以提前告知浏览器哪些元素将会发生变化，从而让浏览器提前进行优化。但需要谨慎使用，避免过度使用。
使用 contain 属性： contain 属性可以限制元素的影响范围，从而减少重绘的范围。
使用 Chrome DevTools 进行性能分析： 使用 Chrome DevTools 的 Performance 面板可以分析页面的性能瓶颈，找出导致全层重绘的原因。

will-change 属性示例：

.will-change-box {
  width: 200px;
  height: 100px;
  background-color: #fff;
  transition: transform 0.3s ease-in-out;
  will-change: transform; /* 提前告知浏览器该元素将会发生 transform 变化 */
}

.will-change-box:hover {
  transform: scale(1.1);
}

contain 属性示例：

.contain-box {
  width: 200px;
  height: 100px;
  background-color: #fff;
  contain: layout; /* 限制该元素只影响自身的布局 */
}

性能分析工具：Chrome DevTools

Chrome DevTools 提供了强大的性能分析工具，可以帮助我们找出页面中的性能瓶颈。

Performance 面板： 可以记录页面的性能数据，包括 CPU 使用率、内存消耗、绘制时间等。通过分析 Performance 面板的数据，可以找出导致性能问题的 CSS 属性和 JavaScript 代码。
Rendering 面板： 可以显示页面的重绘区域、图层信息等。通过查看 Rendering 面板，可以了解哪些元素触发了重绘，以及重绘的范围。
Layers 面板： 可以显示页面的图层结构。通过查看 Layers 面板，可以了解哪些元素被提升为独立图层，以及图层的合成情况。

通过熟练使用 Chrome DevTools，我们可以更有效地分析和解决 CSS 绘制风暴问题。

优化策略总结

谨慎使用 box-shadow 和 border-radius： 尽量减少阴影层数、降低模糊半径、控制圆角半径。
使用伪元素、SVG 阴影、clip-path 等技术代替复杂的 CSS 效果。
避免频繁的 DOM 操作和强制同步布局。
使用 will-change 和 contain 属性优化性能。
使用 Chrome DevTools 进行性能分析和优化。
了解硬件加速的原理，谨慎使用硬件加速。

权衡与选择

前端性能优化是一个权衡的过程。在追求视觉效果的同时，我们需要充分考虑性能，并在两者之间找到平衡点。选择最佳的优化策略需要根据具体的应用场景和目标用户群体进行权衡。例如，对于面向低端设备用户的应用，我们需要更加注重性能优化，而对于面向高端设备用户的应用，我们可以适当放宽性能要求。

今天的分享就到这里，希望对大家有所帮助。

更多IT精英技术系列讲座，到智猿学院