javascript性能优化之DOM交互操作实例分析

前端之家收集整理的这篇文章主要介绍了javascript性能优化之DOM交互操作实例分析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了javascript性能优化之DOM交互操作技巧。分享给大家供大家参考,具体如下:

在javascript各个方面,DOM毫无疑问是最慢的一部分。DOM操作与交互要耗费大量时间,因为它们往往需要重新渲染整个页面或者某一部分。理解如何优化与DOM的交互可以极大提高脚本完成的速度。

1、最小化DOM更新

看下面例子:

代码为列表添加10个项目。添加每个项目时,都有两次DOM更新。总共需要20次DOM更新。

我们可以使用 文档碎片 来最小化DOM更新。

更多关于 文档碎片,详见之前文章

2、使用innerHTML

对于比较大的DOM更改,使用innerHTML要比createElement()和appendChild()快。

"; } list.innerHTML = html;

3、使用事件委托

详见之前文章 《

4、注意NodeList

最小化访问NodeList的次数可以极大的改进脚本的性能,因为每次访问NodeList,都会运行一次基于文档的查询

属性。当在循环中使用NodeList的时候,把imgs[i]放入image变量中,以避免在循环体内多次调用NodeList;

更多关于 NodeList,详见之前文章方法

希望本文所述对大家JavaScript程序设计有所帮助。

猜你在找的JavaScript相关文章