限制通过DOM操作所引发回流的次数

1.在对当前DOM进行操作之前,尽可能多的做一些准备工作,保证N次创建,1次写入。

        2.在对DOM操作之前,把要操作的元素,先从当前DOM结构中删除:
            1. 通过removeChild()或者replaceChild()实现真正意义上的删除。
            2. 设置该元素的display样式为“none”。
            修改操作完成后,将上面这个过程反转过来,建议使用第2种方式。

        3.CSS部分
            另外一个经常引起回流操作的情况是通过style属性对元素的外观进行修改,如element.style.backgroundColor = "blue";
            每次修改元素的style属性,都肯定会触发回流操作,要解决这个问题可以:
            1.使用更改className的方式替换style.xxx=xxx的方式。
            2.使用style.cssText = '';一次写入样式。
            3. 避免设置过多的行内样式
            4. 添加的结构外元素尽量设置它们的位置为fixed或absolute
            5. 避免使用表格来布局
            6. 避免在CSS中使用JavaScript expressions(IE only)

        4.将获取的DOM数据缓存起来。这种方法,对获取那些会触发回流操作的属性(比如offsetWidth等)尤为重要。

        5.当对HTMLCollection对象进行操作时,应该将访问的次数尽可能的降至最低,最简单的,你可以将length属性缓存在一个本地变量中,这样就能大幅度的提高循环的效率。转载这里:http://www.w3cgroup.com/article.asp?id=255

原文地址:https://www.cnblogs.com/0banana0/p/2073872.html