性能优化(一)：迭代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的消耗上非常节省，那在内存的消耗上又是怎样的表现，请关注后续评测！