DOM优化

作者：zccst

1，Javascript语音与DOM操作就像孤岛。他们之间的通行是要借助船的，而使用船是有很大成本的。

所以，要先做完一个再做另一个，最好不要交替进行。
如：添加1000个li时，先用一个字符串拼接好，最后一次追加到父节点，而不是向父节点追加1000次，一次追加一个。

var lis = "";
for(var i = 0; i < 1000; i++){
    lis += "<li>"+i+"</li>";
}
oUl.appendChild(lis);


而不是：
for(var i = 0; i < 1000; i++){
    oUl.appendChild("<li>"+i+"</li>");
}



2，减少重排和重绘
（1）先放到一个碎片中
如：添加1000个li时，先放到fragment，再添加到UL中
（2）合并css，减少重回次数
style="height:200px;width:200px;background:red;";
而不是
obj.style.height = 200 + "px";
obj.style.width = 200 + "px";
obj.style.background = 200 + "px";



如果您觉得本文的内容对您的学习有所帮助，您可以微信：