页面重排（reflow）是指浏览器重新计算页面的渲染布局，通常是由于元素的尺寸、位置或者视口尺寸发生了变化导致的。重排会影响页面的性能，应尽量避免。
页面重绘（repaint）是指浏览器对已渲染的页面进行更新，通常是由于元素的样式发生了变化导致的。重绘不会影响布局，但会消耗更多的 CPU 资源。

通常情况下，浏览器会在重排后自动触发重绘，但有时候也需要手动触发重绘。重排和重绘的过程是非常消耗性能的，所以，在网页开发过程中，应该尽量避免过多的重排和重绘。

触发重排的情况

• 页面渲染初始化时候 ，
• 浏览器尺寸变化时，
• 元素尺寸发生改变
• 元素位置发生改变
• 元素内容发生改变
• 添加或者删除可见的dom元素

常见的触发重绘的属性

• color
• border-style
• visibility
• background
• text-decoration
• background-image
• background-position
• background-repeat
• outline-color
• outline
• outline-style
• border-radius
• outline-width
• box-shadow
• background-size

建议一：

为了避免页面重排和重绘带来的性能问题，你可以采取以下措施：

1. 尽量减少对 DOM 的操作，特别是对频繁操作的元素。

2. 避免使用递归，尽量使用循环。

3. 使用缓存，尽量避免重复计算。

4. 使用 css3 的动画和过渡，避免使用 JavaScript 来控制动画。

5. 尽量使用相对定位，避免使用绝对定位。

6. 尽量使用轻量级的元素，如 div 和 span，避免使用重量级的元素，如 table 和 form。

当你要在 JavaScript 中操作 DOM 时，应该尽量避免使用过多的 DOM 操作，特别是对频繁操作的元素。这是因为，每次 DOM 操作都会导致浏览器进行重排和重绘，这会消耗大量的 CPU 资源，导致页面性能下降。

建议二：

为了避免过多的重排和重绘，有以下几点建议：

• 尽量减少对布局的修改，尤其是在页面加载后的修改，因为这会导致浏览器的重排。
• 使用 CSS 选择器的级别尽量低，因为浏览器在渲染时会从上到下匹配选择器，越深层的选择器匹配越慢，会导致更多的重排。
• 使用 CSS 预处理器，可以减少代码量，从而减少重排的次数。
• 使用计算属性或者函数计算样式，而不是直接使用字符串拼接的方式。
• 使用动画时，尽量使用 CSS3 动画，因为 CSS3 动画可以通过硬件加速来提升性能，而 JavaScript 动画则不行。
• 使用 requestAnimationFrame() 来控制动画的刷新率，这可以有效减少不必要的重绘。
• 使用 transform 属性来进行位移和缩放，因为 transform 属性会触发硬件加速，而 left、top 等属性则不会。
• 尽量避免使用 table 布局，因为 table 的布局会导致浏览器进行大量的重排。

通过这些方法，你就可以在 JavaScript 中有效地避免页面重排和重绘带来的性能问题了。

避免过多的DOM操作

为了避免过多的 DOM 操作，你可以使用以下方法：

1. 使用文档片段（document fragment）：文档片段是一个轻量级的容器，可以存储多个 DOM 元素。你可以先将所有要操作的元素放入文档片段中，然后再将文档片段添加到页面中。这样做可以减少对 DOM 的操作次数，从而提高性能。

2. 使用 innerhtml：innerHTML 属性可以直接将一段 HTML 代码设置到元素中。你可以先使用字符串拼接的方式生成所有要操作的元素，然后再使用 innerHTML 将所有元素一次性添加到页面中。这样做可以减少对 DOM 的操作次数，从而提高性能。

3. 使用缓存：在 JavaScript 中，你可以使用变量来缓存 DOM 元素。例如，你可以将常用的 DOM 元素存储在变量中，这样就可以直接使用变量而不必每次都去查找 DOM 元素。这样做可以减少对 DOM 的操作次数，从而提高性能。

4. 使用事件委托：事件委托是指，将事件监听器添加到父元素上，而不是子元素。这样，当子元素触发事件时，父元素也会触发事件。这样做可以减少对 DOM 的操作次数，从而提高性能。
5. 使用 CSS3 的动画和过渡：CSS3 的动画和过渡可以让你使用简单的代码实现复杂的动画效果。这些动画和过渡是由浏览器自动实现的，不会对 DOM 进行操作，因此可以大大提高性能。

通过这些方法，你就可以在 JavaScript 中有效地避免过多的 DOM 操作带来的性能问题了。

链接: https://www.fly63.com/article/detial/12310