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";


如果您觉得本文的内容对您的学习有所帮助,您可以微信:
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值