选择器
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>
