javascript|javascript 性能测试笔记 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);

【javascript|javascript 性能测试笔记】原因是 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