避免和减少网页中的重绘和回流

避免和减少网页中的重绘和回流

1.避免设置多层内联样式：每一个内联样式都会导致浏览器重新渲染，样式合并到一个外部类可以减少重绘和回流。
2.使用CSS预处理器：如Sass或Less，可以方便地进行变量和混合（mixins）等操作，在编译时将它们转换为CSS，这样可以减少代码的冗余和复杂性。
3.利用好display:none：在一个display:none的元素上进行操作，可以避免引发回流和重绘。因为display:none上的DOM操作不会引发回流和重绘。
4.离线处理元素：让要操作的元素进行"离线处理"，处理完后一起更新，这样可以避免频繁的操作DOM，减少回流和重绘。
5.在DOM树的末端改变class：在DOM树的末端改变class可以减少回流和重绘，因为这样可以限制回流的范围，使其影响尽可能少的节点。
6.使用CSS3动画代替JavaScript动画：CSS3动画性能更好，可以减少JavaScript表达式产生的回流和重绘。
7.使用虚拟DOM库：如React或Vue等，可以避免频繁的DOM操作，优化性能。
8.对于复杂的DOM操作，可以使用文档片段（DocumentFragment）：在文档片段上应用所有DOM操作，然后再将其添加到文档中，这样可以减少DOM操作的次数，优化性能。
9.避免使用CSS表达式（例如：calc()）：CSS表达式会导致每次计算都需要浏览器进行重新的渲染。
10.JavaScript方面，避免频繁操作样式，最好将样式列表定义为class并一次性更改class属性；避免频繁操作DOM，可以创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。