性能优化(一)：迭代DOM真的很慢吗？

      在代码检查时，经常告诫小组成员尽量不要对DOM对象进行迭代，而要对JS对象进行迭代，这样它们之间的差异能达到上百倍(参见AJAX实战，其实是我记错了，不是CPU的使用量，而是内存的消耗量)，有一次又在给他们谆谆教诲时，有个小丫头满脸的不服气，于是手把手地做了一次实验，然而实验却让我大吃一惊。

      测试浏览器选择Chrome 50.0.2661.75版本，CPU i7-4790@3.6GHz，内存8G，操作系统Win 7 64bit。

      首先在页面上放下容器元素，如下：

<div id="container">
</div>

      然后是JS使用，分别迭代数组与Dom元素，如下：

var counts = 1000,
    container = document.getElementById('container');
//   将数据简单地添加到数组中   
function addObj(times) {
    console.time("Object add");
    var result = [],
        i = 0;
    for(; i < times; i ++) {
        //  为了保证类型转换消耗同样的时间，这里存入字符串
        result.push(new String(i));
    }
    console.timeEnd('Object add');
    return result;
}
//  一次创建Dom元素
function addDom(container, times) {
    console.time("Dom add");
    var i = 0,
        item;
    for(; i < times; i ++) {
        item = document.createElement('h4');
        item.textContent = new String(i);
        container.appendChild(item);
        container.appendChild(item);
    }
    console.timeEnd('Dom add');
    return document.querySelectorAll('#container>h4');
}  
//  调用创建对象的方法
var objs = addObj(counts);
//  调用创建dom的方法
var doms = addDom(container, counts);

      执行后，我们发现如下结果，添加1000个数字到数组中需要0.576ms，而添加dom则需要2.918ms，差异大约在五倍左右(有时候也会出现2倍的差异)，增大迭代的数据次数，他们之间的差剧越来越大，如下：

分类\次数	1000次	2000次	3000次	5000次	10000次
数组迭代	0.576ms	0.560ms	1.313ms	2.060ms	2.326ms
DOM迭代	2.918ms	2.906ms	5.409ms	16.651ms	28.978ms

      通过上面的数据，我们发现他们的迭代速度都很快，尤其是dom节点插入的速度能达到这样的速度，让我很是惊讶，但随着迭代次数的增加，dom迭代的性能越来越差，所以，如果能不创建dom对象，尽量就不要创建dom对象，把初始化数据存放在JS对象里是一个更好的选择。

      测完了写入，再测试读取，功能都是简单地求和，代码如下：

//  对数组进行求和
function sumObj(items) {
    console.time('Read Obj');
    var result = 0;
    for(var i=0; i < items.length; i++) {
        result += parseInt(items[i]);
    }
    console.timeEnd('Read Obj');
    return result;
}
//  对Dom进行求和
function sumDoms(items) {
    console.time('Read Dom');
    var result = 0;
    for(var i=0; i < items.length; i++) {
        result += parseInt(items[i].textContent);
    }
    console.timeEnd('Read Dom');
    return result;
}
var s1 = sumObj(objs),
    s2 = sumDoms(doms);

      执行上面的代码后，我大吃一惊，在1000次及以下的迭代过程中，DOM迭代的速度竟然高于数组迭代，但随着迭代次数的增加，数组迭代的性能逐渐超越了dom迭代。下面是详细的测试数据。

分类\次数	1000次	2000次	3000次	5000次	10000次
数组迭代	0.901ms	1.001ms	1.476ms	5.589ms	3.995ms
DOM迭代	0.804ms	1.352ms	2.259ms	7.532ms	11.054ms

      DOM迭代的速度竟然还能高于数组迭代，这是怎么做到的？我满脸都是问号，反复测试过多次，依旧出现这样的结果。

      这次的实验告诉我们，dom迭代的性能远远超过我们的想象，几乎就与普通的JS对象操作一致，并且在千次以内的迭代中，dom迭代的写性能几乎与数组赋值一致，在读性能竟然还能完胜数组取值。

      DOM在CPU的消耗上非常节省，那在内存的消耗上又是怎样的表现，请关注后续评测！