前端性能优化: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就会引起浏览器渲染,而渲染是相当慢的,因此应该避免不必要的渲染
[javascript] view plain copy
divUpdate.innerHTML = "";
for ( var i=0; i<100; i++ )
{
divUpdate.innerHTML += "<SPAN>This is a slower method! </SPAN>";
}
改为
[javascript] view plain copy
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元素的样式,类也会导致浏览器渲染,因此也应该减少不必要的操作
[javascript] view plain copy
var el = document.getElementById('mydiv');
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
el.style.padding = '5px';
改为
[javascript] view plain copy
var el = document.getElementById('mydiv');
l.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';

4批量修改DOM时从文档流中摘除该元素 ,对其应用多重改变 ,将元素带回文档中
这样可以最小化重绘和重排版 ,
具体方法:
1 隐藏元素,进行修改,然后再显示它。
2将原始元素拷贝到一个脱离文档的节点中,修改副本,然后覆盖原始元素。
5减少iframe
iframe需要消耗大量的时间,并阻塞下载,建议少用
据说动态给iframe添加URL可以改善性能,未做测试
6样式放在header中,脚本放在关闭标签</body>之前
样式放在header中,可以加快渲染,脚本放在关闭标签</body>之前可以加快下载速度,不免阻塞下载。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,786评论 1 92
  • 一直在学习 javascript,也有看过《犀利开发 Jquery 内核详解与实践》,对这本书的评价只有两个字犀利...
    独念白阅读 235评论 0 2
  • AJax 优化 缓存 Ajax 请求尽量使用GET, 仅取决于cookie数量 Cookie 优化 减少Cooki...
    KeKeMars阅读 9,370评论 5 89
  • 不纠结颜料,发现用心,最菜的颜料,也可以绽放它的美好!
    迷鹿mirror阅读 205评论 4 2
  • 【一二二三 写正史的工科硕士】 文:李彦编辑:刘金金 欢迎转载分享 盗文抄袭必究! 大明嘉靖二十一年,皇宫之...
    李_彦阅读 10,669评论 0 9