作者: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";
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]
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";
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]