DOM访问---高性能JavaScript读书笔记（3）

标签：des   style   blog   http   io   ar   color   os   使用   

在JavaScript高级程序设计第一章当中就把JavaScript分成三大部分

所以事实上DOM和BOM是两在独立的部分，它们之间的通信是通过相互之间的功能接口来实现的，这样说来两个独立的部分以功能接口必定会带来性能损耗。这也就是为什么大家一致都说尽量少去访问和修改DOM元素（注意我这里说的是访问和修改，为什么包括访问，请继续往下看  哈哈）。

下面用一张图来说明它们各自的作用。

1、在修改DOM元素的时候，我们应该尽量使用innerHTML而不是CreateElement再AppendChild(因为经过测试，在所有的浏览器当中使用innerHTML更加快一些)

2、修改DOM元素内容时另外一个方法是使用element.cloneNode来代替document.createElement()

3、在循环或者遍历元素时，尽量使用局部变量保存HTML Collections

那具体什么叫HTML Collections，它包括哪些元素呢？

总结一句话就是说HTML Collections事实上是虚拟存在的，意味着当底层文档更新时，它们将自动更新。当每次迭代访问HTML Collections的length属性时，它会导致集合器更新，所以将length属性缓存到一个变量中，然后在循环判断条件中使用这个变量。

4、childNodes是一个集合，这也是为什么很多提高JavaScript性能的建议当中有这样一条了“使用firstChild和nextSibling代替childNodes遍历dom元素”  用图来说话吧（不信你可以测试一下，明显testNextSibling的速度比testChildNodes的快特别是当数据量大的时候一眼就能看出来）

5、如果浏览器使用具有原生的QuerySelectorAll（）方法和querySelector()方法尽量使用它们（因为自己实现它们的功能需要编写特别多的代码，还有就是任何编程语言都有一个共通的特性就是原生方法永远是性能最佳的）

6、最小化重绘和重排

在说明这个的时候顺便理清一下什么叫重绘，什么叫重排

大家都知道当一个页面展示在我们面前的时候，事实上浏览器下载完成所有的html标记，js，css，图片之后，它解析文件并创建两个内部结构，一个是DOM树，一个是渲染树。浏览器根据DOM树来进行排列，根据渲染树来进行绘制。

什么情况下会发什么重排呢

• 添加或删除可见的DOM元素
• 元素位置改变
• 元素尺寸改变（因为边距、填充、边框宽高等属性）
• 内容改变
• 最初的页面渲染
• 浏览器窗口改变尺寸

理解了重排，重绘就更加简单了，从字面意思上来说就是重新绘制，那什么情况下会发生重绘，比如说改变样式背景等

上图中列举的这些属性的访问将会导致重新刷新渲染树从而导致重排，最好减少对这些属性（布局信息）的查询次数，查询时将它赋给局部变量，并用局部变量参与计算。

再来看一个小例子

这明显是糟糕的代码，改变了三次风格属性，导致浏览器重排了三次。一个提高效率的方法就是只重排一次。看下面代码就明白了

或者使用类名的方法

当你需要对DOM树中的多个元素进行修改的话，最好依据下列步骤来减少重排和重绘

• 从文档流中摘下此元素
• 对其应用多重改变
• 将元素带回文档中

有三种方式可以将元素从文档流中摘除

• 隐藏元素，对其进行修改后再显示
• 使用文档片断在已存DOM之外创建一个子树，然后将它拷贝到文档中（推荐使用此方法，因为它是涉及最小数量的DOM操作和重排）
• 将原始元素拷贝到一个脱离文档的节点中，修改副本，然后副本，然后覆盖原始元素

将第二次方案的代码贴一下，希望大家能使用这种方法来提高性能。

       for (var i = 0; i < 1000; i++) {
            var el = document.createElement(‘p‘);
            el.innerHTML = i;
            document.body.appendChild(el);
        }
        //可以替换为：
        var frag = document.createDocumentFragment();
        for (var i = 0; i < 1000; i++) {
            var el = document.createElement(‘p‘);
            el.innerHTML = i;
            frag.appendChild(el);
        }
        document.body.appendChild(frag);

如果是动画元素的话，最好使用绝对定位以让它不在文档流中，这样的话改变它的位置不会引起页面其它元素重排

(我要说的就这些啦，希望大家共同探讨！)

DOM访问---高性能JavaScript读书笔记（3）

标签：des   style   blog   http   io   ar   color   os   使用   

原文地址：http://www.cnblogs.com/ctriphire/p/4146309.html