美文网首页
javascript 性能测试笔记

javascript 性能测试笔记

作者: 北方蜘蛛 | 来源:发表于2016-12-11 22:24 被阅读15次

选择器

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

测试代码


var init = function(){
    var lis = "";
    for(var i = 0; i < 10000; i++){
        lis += "<li>"+(i*10+Math.random(0,12))+"</li>"
            
    }
    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("")方法会快很多。

<div class="one" id="demo"></div>
<input type="button" value="效率低" onclick="func1()" />
<input type="button" value="效率高" onclick="func2()" />

<script>
     var str = "<div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div>";

    //效率低的
    function func1(){
        var obj = document.getElementById("demo");
        //obj.innerHTML="";
        var nstr = "";
        var start = new Date().getTime();
        for(var i = 0; i < 1000; i++){
             nstr += str + i + Math.random(0,12);
        }
        obj.innerHTML = nstr;
        var end = new Date().getTime();
        console.log("用时 " + (end - start) + " 毫秒");
    }

    //效率也没多高
    function func2(){
        var obj = document.getElementById("demo");
        var start = new Date().getTime();
        var arr = [];
        for(var i = 0; i < 1000; i++){
            arr[i] = str + i + Math.random(0,12);
        }
        obj.innerHTML = arr.join("");
        var end = new Date().getTime();
        console.log("用时 " + (end - start) + " 毫秒");
    }

</script>

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

六、DOM执行效率

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

<script>
    修改前:
    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);
</script>

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

相关文章

网友评论

      本文标题:javascript 性能测试笔记

      本文链接:https://www.haomeiwen.com/subject/ttxldttx.html