在前端开发中，JavaScript 性能是至关重要的。优化 JavaScript 性能能够更好地提升网站加载速度和响应时间。其中，避免重排和重绘是优化 JavaScript 性能的重要方面。本文将详细介绍重排和重绘的概念、原因和优化方法。
什么是重排和重绘？
重排（reflow）和重绘（repaint）是浏览器中渲染页面时的两个重要过程。
重排指的是当页面的布局和几何属性发生变化时，浏览器会重新计算元素的大小和位置，并重新排布页面上的元素。重排是非常消耗性能的，因为它需要遍历整个文档树，并计算元素的位置和大小。
而重绘指的则是当元素的样式属性发生变化时，浏览器会重新绘制这个元素。重绘的代价比重排小一些，因为它只需要重新绘制这个元素，而不需要重新计算它的大小和位置。
显然，避免重排和重绘的发生可以提升页面的性能，从而提高用户的体验。
为什么会发生重排和重绘？
了解重排和重绘的原因，能够更好地避免它们的发生。
重排的原因
重排的原因主要有以下几个：
- 添加/删除 DOM 元素
- 改变元素的位置、大小、边框、内外边距等样式属性
- 计算页面布局属性，如 offsetWidth/Height、clientWidth/Height、scrollWidth/Height 等
重绘的原因
重绘的原因主要有以下几个：
- 改变元素的背景色、文本颜色、边框颜色等颜色属性
- 改变元素的文本内容、字体大小、字体粗细等文本属性
- 改变元素的 visibility、opacity、box-shadow 等复合属性
如何避免重排和重绘？
重排和重绘是非常消耗性能的，因此我们应该尽可能地避免它们的发生。以下是一些避免重排和重绘的方法：
1. 缓存 DOM 查找结果
避免频繁地执行 DOM 查找可以减少重排和重绘的发生。因此，我们可以缓存查找 DOM 元素的结果，以避免多次执行查找操作。
-- -------------------- ---- ------- -- - --- ---- - - -- - - ------------------------------------------------ ---- - -- --- - -- - ----- ---- - -------------------------------- --- ---- - - -- - - --------------------- ---- - -- --- -
2. 批量修改 DOM 元素
频繁地修改 DOM 元素可以导致浏览器进行大量的重排和重绘操作。因此，我们应该尽可能地批量修改 DOM 元素。
-- -------------------- ---- ------- -- - --- ---- - - -- - - ----- ---- - --------------------------------------------------------- - -- - ----- -------- - ---------------------------------- --- ---- - - -- - - ----- ---- - ---------------------------------------------------- - ------------------------------------
3. 使用 CSS 动画
使用 CSS 动画可以避免大量的 JavaScript 操作，从而减少重排和重绘的发生。
-- -------------------- ---- ------- -- - -------------- -- - ----- ---- - --------------------------------------------------- -- -- ----------------------------------------- - ------- - ------ -- ---- -- - ---- - --------- --------- ---------- ---- -- --------- - ---------- ---- - -- ------ ----- ---- ------ ------- -
4. 使用 CSS3 transform
使用 CSS3 transform 可以让元素在不进行重排的情况下进行位移、旋转、缩放等变换操作。
-- -------------------- ---- ------- -- - --- ---- - - -- - - ----- ---- - ----------------------------------------- - --------- - -- - ---- - --------- --------- ---------- ---------------- ----------- --------- --- - ---------------------------------------------- - ---------------------
5. 避免频繁读取布局属性
频繁地读取布局属性，如 offsetWidth/Height、clientWidth/Height、scrollWidth/Height 等，会导致浏览器进行重排。因此，我们应该尽可能地避免频繁读取这些布局属性。
-- -------------------- ---- ------- -- - --- ---- - - -- - - ----- ---- - ----- ------ - -------------------------------------------- - -- - ----- ------ - -------------------------------------------- --- ---- - - -- - - ----- ---- - -- --- ------ -
总结
避免重排和重绘可以显著提升 JavaScript 性能，从而提高用户体验。在编写前端代码时，我们应该尽量遵循上述几点优化建议，来避免重排和重绘的发生。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664ba896d3423812e4a8aafb