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

原文转载：http://www.cnblogs.com/0banana0/archive/2011/06/06/2073872.html

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/luofuxian/archive/2011/10/11/2207307.html