前端性能优化:DOM操作性能优化建议

其实在web开发中,单纯因为js导致性能问题的很少,主要都是因为DOM操作引起的。

1查找元素的优化

2改变DOM,包括添加,修改,删除DOM

3改变DOM的样式类等

4批量修改DOM

5减少iframe

6样式放在header中,脚本放在关闭标签</body>之前



1查找元素的优化

  因为ID是唯一的,也有原始的方法,因此使用ID查找元素是最快的,其次的是根据类和类型查找元素,通过属性查找元素是最慢的,因此应该尽可能的通过ID或者类来查找元素,避免通过类来查找元素。


2改变DOM,包括添加,修改,删除DOM

  改变DOM就会引起浏览器渲染,而渲染是相当慢的,因此应该避免不必要的渲染

 divUpdate.innerHTML = "";
 for ( var i=0; i<100; i++ )
 {
  divUpdate.innerHTML += "<SPAN>This is a slower method! </SPAN>";
 }
改为

var str="";
 for ( var i=0; i<100; i++ )
 {
  str += "<SPAN>This is faster because it uses a string! </SPAN>";
 }
 divUpdate.innerHTML = str;
3改变DOM的样式类等

 改变DOM元素的样式,类也会导致浏览器渲染,因此也应该减少不必要的操作

 var el = document.getElementById('mydiv'); 
el.style.borderLeft = '1px'; 
el.style.borderRight = '2px'; 
el.style.padding = '5px'; 
改为

 var el = document.getElementById('mydiv'); 
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;'; 

4批量修改DOM时从文档流中摘除该元素 ,对其应用多重改变 ,将元素带回文档中 

   这样可以最小化重绘和重排版   ,

  具体方法:

  1 隐藏元素,进行修改,然后再显示它。 

  2将原始元素拷贝到一个脱离文档的节点中,修改副本,然后覆盖原始元素。

5减少iframe

   iframe需要消耗大量的时间,并阻塞下载,建议少用   

    据说动态给iframe添加URL可以改善性能,未做测试

6样式放在header中,脚本放在关闭标签</body>之前

      样式放在header中,可以加快渲染,脚本放在关闭标签</body>之前可以加快下载速度,不免阻塞下载。

 



微软参考文章
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值