🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

在网页开发中，理解给标签设置CSS属性时何时会触发重绘（Repaint）或重排（Reflow）是优化页面性能的关键。本文将深入探讨这两种机制的原理、触发条件以及相关的优化策略。

一、重绘和重排的概念

• 重排（Reflow）：也称为回流，是指当浏览器重新计算元素的几何属性（如位置、大小等）时发生的操作。这会导致浏览器重新构建渲染树，并重新布局页面上的元素。重排是一个代价较高的操作，因为它可能会影响到其他元素的位置和布局，进而导致一系列的连锁反应。
• 重绘（Repaint）：当元素的外观发生改变，但不影响其几何属性时，浏览器会执行重绘操作。例如，改变元素的颜色、背景色等。重绘的代价相对较小，因为它只需要更新元素在屏幕上的显示，而不需要重新计算布局。

二、常见CSS属性设置与重绘、重排的关系

• 会触发重排的CSS属性
  • 盒模型相关属性：如 width、height、padding、margin、border 等。当这些属性的值发生变化时，元素的大小或位置会改变，从而导致重排。例如，增加一个元素的 padding，会使该元素变大，可能会影响到周围元素的布局。
  • 定位属性：position、top、left、right、bottom 等。改变元素的定位方式或偏移量，会导致元素在页面中的位置发生变化，触发重排。例如，将一个元素的 position 从 static 改为 absolute，并设置了 top 和 left 属性，会使该元素脱离正常文档流并重新定位。
  • 浮动属性：float。元素的浮动状态改变会影响其在文档流中的位置和周围元素的布局，引发重排。
  • 字体相关属性：font-size、font-family 等。字体大小或字体系列的改变可能会导致文本占用的空间发生变化，从而触发重排。
• 会触发重绘但不会触发重排的CSS属性
  • 颜色属性：如 color、background-color、border-color 等。改变这些属性只会影响元素的颜色显示，不会改变其几何属性，因此只会触发重绘。
  • 背景属性：除 background-size 外的其他背景属性，如 background-image、background-repeat、background-position 等。当这些属性改变时，只会重绘元素的背景，而不会影响其布局。
  • 阴影属性：box-shadow、text-shadow。添加或改变阴影效果只会影响元素的外观，不会改变其大小和位置，所以只会触发重绘。

三、重绘和重排的触发机制

浏览器会维护一个渲染队列，当有CSS属性改变时，它不会立即执行重排或重绘操作，而是将这些操作放入队列中。当队列中的操作积累到一定数量或者达到某个时间阈值时，浏览器会批量执行这些操作，以减少重排和重绘的次数，提高性能。然而，有些情况下，浏览器需要立即知道元素的最新布局信息，这时就会强制触发重排或重绘。例如，当使用 getComputedStyle 方法获取元素的计算样式，或者访问元素的一些属性，如 offsetWidth、offsetHeight、scrollTop、scrollLeft 等，浏览器为了返回准确的值，可能会提前执行渲染队列中的重排或重绘操作。

四、优化策略

• 减少重排和重绘的次数
  • 避免频繁地改变会触发重排的CSS属性：可以将多个相关的属性改变合并到一个CSS类中，然后通过添加或删除类名来一次性应用这些改变。
  • 使用 requestAnimationFrame：如果需要在动画中改变元素的样式，使用 requestAnimationFrame 可以确保样式改变在浏览器下一次重绘之前进行，避免不必要的重绘和重排。
• 合理使用CSS属性
  • 利用 will-change 属性：可以在元素需要进行复杂动画或频繁更新时，提前使用 will - change 属性告知浏览器该元素的哪些属性将会发生变化，让浏览器提前进行优化。
  • 避免使用 table 布局：table 元素的布局计算较为复杂，容易导致大规模的重排。尽量使用 flex 或 grid 布局来替代。

理解给标签设置CSS属性时触发重绘和重排的机制，对于优化网页性能至关重要。通过合理地使用CSS属性，减少不必要的重排和重绘操作，可以提高页面的加载速度和交互性能，为用户提供更好的体验。