前端规避重绘和回流的方法：1、使用transform替代top/left；2、使用visibility替代display；3、避免使用table布局；4、避免频繁操作样式；5、使用DocumentFragment；6、使用虚拟DOM；7、避免在布局变化时读取布局信息；8、使用CSS3动画；9、使用flex布局；10、避免使用过多的浮动等等。

本教程操作系统：Windows10系统、Dell G3电脑。

在前端开发中，重绘和回流是性能优化中需要重点关注的问题。重绘和回流会导致页面性能下降，影响用户体验。下面是一些规避重绘和回流的方法：

1. 使用 transform 替代 top/left：当改变元素的位置时，避免直接操作 top 和 left 属性，而是使用 CSS 的 transform 属性来实现位移。transform 属性不会触发回流，因此能够提高性能。

2. 使用 visibility 替代 display：display 属性会触发回流和重绘，而 visibility 属性只会触发重绘，不会触发回流。因此，可以考虑使用 visibility 属性来隐藏元素，而不是使用 display: none。

3. 避免使用 table 布局：table 布局会触发大量的回流和重绘，尽量避免使用 table 布局。可以使用 div + css 的方式来替代表格布局。

4. 避免频繁操作样式：频繁操作样式会导致大量的回流和重绘，可以将多次操作样式合并为一次操作，或者使用 CSS 类来批量修改样式。

5. 使用 DocumentFragment：如果需要频繁操作 DOM 元素，可以先将它们添加到 DocumentFragment 中，然后再统一插入到文档中。这样可以减少回流和重绘。

   

   精英前端设计-专业版

   企业级前端设计系统，支持多页面应用、React/Vue组件、品牌一致性与高级动效编排。

   下载

6. 使用虚拟 DOM：虚拟 DOM 可以减少不必要的 DOM 操作，从而降低回流和重绘的次数。可以使用框架如 React、Vue 等来实现虚拟 DOM。

7. 避免在布局变化时读取布局信息：在布局发生变化时，如果立即读取布局信息（如 offsetTop、offset 等），会导致浏览器强制进行回流。可以通过使用 requestAnimationFrame 或者 setTimeout 来延迟读取布局信息，以避免触发回流。

8. 使用 CSS3 动画：CSS3 动画可以利用硬件加速，可以提高动画的性能。可以使用 transform 和 opacity 属性来实现动画效果，避免使用 top 和 left 属性。

9. 使用 flex 布局：flex 布局相比传统的布局方式，能够更加高效地实现页面布局，减少回流和重绘。

10. 避免使用过多的浮动：浮动会导致周围元素重新计算位置，引发回流。可以使用 CSS 的 flex 布局或者使用绝对定位来代替浮动。

总结起来，规避重绘和回流的关键是减少对 DOM 的操作次数和范围，尽量使用合适的 CSS 属性和布局方式，避免频繁读写样式，合理使用优化技术和工具。通过遵循这些原则，可以有效提高前端页面的性能和用户体验。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！