一个能减少重绘的属性？分享 1 段优质 CSS 代码片段！

今天分享一段优质 CSS 代码片段, 使用它可以减少回流和重绘的影响。


.element {
  will-change: transform;
}

分享原因

这段代码使用了 will-change 属性, 是一种性能优化的手段, 对于关注网页性能的开发者具有重要的参考价值。

will-change 主要应用于减少回流(reflow), 但对重绘(repaint)也可能有一定的优化效果。

当使用 will-change 提前告知浏览器元素可能发生的变化时, 浏览器可以提前进行一些优化操作, 从而减少在实际变化发生时的回流和重绘成本, 提升用户体验。

代码解析

避免回流(reflow)和重绘(repaint)对于提高网页性能至关重要。

回流是指浏览器重新计算元素的位置和大小的过程, 而重绘则是指浏览器重新绘制元素的过程。

频繁的回流和重绘会严重影响用户体验, 因为它们会导致页面闪烁并消耗更多的CPU资源。

will-change 属性是用于告诉浏览器, 该元素即将发生特定的变化(在这个例子中是 transform 变换)。

浏览器会提前进行一些优化准备, 以提高元素在变化时的渲染性能。

例如, 如果该元素即将进行旋转、缩放、平移等变换操作, 通过设置 will-change: transform, 浏览器可以提前分配资源, 使得这些变换更加流畅, 减少卡顿现象。

will-change 可以接受以下常用的属性值：

auto：这是默认值, 表示不进行任何特定的优化预测。

scroll-position：表示滚动位置可能会改变。

contents：元素的内容可能会改变。

opacity：不透明度可能会改变。

transform：变换（如旋转、缩放、平移等）可能会发生。

top、left、bottom、right：元素的位置可能会改变。

height、width：元素的高度或宽度可能会变化。