《高性能javascript》 领悟随笔之-------DOM编程篇

　　　　《高性能javascript》 领悟随笔之-------DOM编程篇一

　　序：在javaSctipt中，ECMASCRIPT规定了它的语法，BOM实现了页面与浏览器的交互，而DOM则承载着整个页面文档。DOM编程性能一直以来都是非常受开发者关注的话题，如何编写高性能的DOM是前端开发必不可少的技能。

---

 

　　1.DOM访问与修改

访问DOM元素是有一定的性能代价的，有时候这种代价会整体拖慢网页的运行速度，例如循环访问或修改一些元素内容，操作不当会导致页面卡帧，甚至是假死，例如下面的代码。

function loop(){
    for(var i=0;i<1000;i++){
        document.getElementById("id").innerHTML += "a"; 
    }
}

loop（）函数 循环修改某个元素的innerHTML内容，这段代码的问题在于，每次循环，这个元素都会被访问两次 一次读取，一次修改；

优化的关键在于，我们可以将需要的最终内容拼接成一个字符串，在字符串拼接完成之后一次性修改，这样做大大提升了整体运行速度，并且使代码更容易被理解；

function loop(){
    var oDiv = document.getElementById("id"),
    sDIV = oDiv.innerHTML; 　　
    for(var i=0;i<1000;i++){
       sDIV  += "a"; 　　　　//拼接文本字符串
    }
    oDiv.innerHTML = sDiv;
}

同理，当我们需要请求某一个表格，异步插入数据的时候，往往先将数据拼接成字符串，再利用innerHTML一次性插入；

for(...){
    var t += "<div>......</div>";
} 
table.innerHTML = ......;

总结：访问DOM的次数越多，代码的运行速度越慢。因此，通常的经验法则是：减少dom的访问次数，把运算尽量用ECMASCRIPT处理；

2.访问html集合

HTML集合是包含了一组节点信息的类数组对象，它拥有数组的下标访问特性，又不同于数组的引用；

列举一些返回html集合的方法：

document.getElementsByTagName(); 
document.getElementsByClassName();
document.images   //返回页面中所有的img元素
document.links   //返回页面中的所有链接元素（a）
document.forms  //返回页面中所有的表单
......

在访问或者修改这些元素集合的时候，因为访问元素集合始终是没有访问数组快的，所以在修改元素变化不大而的时候，可以将其复制到另一个数组中，从而提升访问速度

function htmltoArray(h){
        for(var i=0,len=h.length,arr=[];i<len;i++){　　//遍历 复制整个集合
            arr[i]=h[i];
        }
        return arr;
    }

这是一个有趣的方法，笔者通过这个函数，试着做了一个类似与jquery的 .index() 方法 ， 其原理是将集合复制到数组中 利用数组对象的方法indexof（） 确定某个元素相对它的父级元素的位置，代码如下：

function Index(a){
        var b = htmltoArray(a.parentNode.children);
        return b.indexOf(a);  //确定a元素相对它的父级元素b的位置
    }

另外，对于所有的DOM访问，多次访问同一个元素的时候，需要把它存在一个局部变量中，减少重复访问的次数；

总结：所有的需要多次访问的元素，事先将其保存在一个局部变量中可以减少访问次数，提高性能，遍历一个数组总是要比遍历一个集合要快得多，一些新的api能够更快速的获得html集合，比如querySeleteor（）querySeleteorAll（），使dom集合操作更加简单，高效；  api参考地址：http://www.cnblogs.com/daxian2012/archive/2012/10/18/2729359.html