javascript 性能测试笔记

选择器

ES5 新的选择器api document.querySelectorAll 的效率经过测试 优于 document.getElementsByTagName 100倍。

测试代码

var init = function(){
    var lis = "";
    for(var i = 0; i < 10000; i++){
        lis += "
"+(i*10+Math.random(0,12))+"
"
            
    }
    document.getElementById('ul').innerHTML = lis;
}
var updateHtml = function(){
   var lix = document.querySelectorAll("#ul>li");
   //var lix = document.getElementsByTagName("li");
   var i=0;
   for(; i < lix.length; i++ )
   {  
      lix[i].innerHTML = (i+Math.random(0,12)); 
     
   }
}
//脚本执行时间
function test(func){
 
 var start = new Date().getTime();//起始时间
 
 func();//执行待测函数
 
 var end = new Date().getTime();//接受时间
 
 return (end - start)+"ms";//返回函数执行需要时间
 
}

test(init);
test(updateHtml);

原因是 document.getElementsByTagName 返回的是一个html文档集合和前者是一个数组。

字符串拼接 && 减少重绘次数

听说传统+=拼接方法是低效的，用 array.join("")方法会快很多。

测试结果两种方法名没有什么差别，需要注意的是，只要不把innerHTML 写在循环内部，都很快。

六、DOM执行效率

1.1 使用DocumentFragment优化多次append，使用文档碎片
说明：添加多个dom元素时，先将元素append到DocumentFragment中，最后统一将DocumentFragment添加到页面。
该做法可以减少页面渲染dom元素的次数。经IE和Fx下测试，在append1000个元素时，效率能提高10%-30%，Fx下提升较为明显。

来源 http://www.cnblogs.com/couxiaozi1983/p/3510891.html