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

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

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操作,最后再把它添加到文档中。

猜你喜欢

转载自blog.csdn.net/longxiaobao123/article/details/132968175
今日推荐