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

本内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！

大家好，我是大澈！

本文约 800+ 字，整篇阅读约需 1 分钟。

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

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！

.element {
  will-change: transform;
}

分享原因

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

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

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

代码解析

1. 回流和重绘

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

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

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

2. will-change: transform;

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

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

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

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

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

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

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

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

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

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

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