一旦你需要访问DOM部分是已经显示的页面的一部分,那么你就是在进行一个现场更新.之所以叫现场更新,是因为需要立即(现场)对页面对用户的显示进行更新.不管是插入单个字符,还是移除整个片段,都有一个性能惩罚,因为浏览器要重新计算无数尺寸以进行更新.
例:
var list = document.getElementById("myList"); for(var i = 0;i < 10;i++){ var item = document.createElement("li"); list.appendChild(item); item.appendChild(document.createTextNode("Item "+i)); }
这样添加10个项目,这个操作总共要完成20个现场更新. 下面用创建文档碎片的方法改进:
var list = document.getElementById("myList"); var fragment = document.createDocumentFragment(); for(var i = 0; i < 10;i++){ fragment.appendChild(item); item.appendChild(document.createTextNode("Item "+i)); } list.appendChlid(fragment);
在这个例子中只有一次现场更新,它发生在所有项目都创建好之后.文档碎片用作一个临时的占位符,放置新创建的项目.然后使用appendChild()将所有项目添加到列表用.记住,当给appendChild()传入文档碎片时,只有碎片中的子节点被添加到目标,碎片本身不会被添加的.
一旦需要更新DOM,请考虑使用文档碎片来构建DOM结构,然后将其添加到现存的文档中.
2). 使用innerHTML
有两种在页面上创建DOM节点的方法:使用诸如createElement(),appendChild()之类的DOM方法,以及使用innerHTML对于小的DOM更改而言,两种方法效率都差不多.而对于大的DOM更改,使用innerHTML要比使用标准DOM方法创建同样的DOM结构快很多.同样,一次使用innerHTML比多次使用innerHTML也要快相当多.
3). 使用事件代理(简,略)
4). 注意NodeList
最小化访问NodeList的次数可以极大的改进脚本的性能.
发生以下情况时会返回NodeList对象:
a. 进行了对getElementsByTagName()的调用
b. 获取了元素的childNodes属性
c. 获取了元素的attributes属性
d. 访问了特殊的集合,如document.forms , document.images等等
要了解当使用NodeList对象时,合理使用会极大提升代码执行速度.
前面介绍的 函数节流 也是很重要的一方面。特别是多重循环，非常耗性能时，此方法很有用的。
PS：对于javascript进行压缩，减少代码体积也是提升javascript性能的有效途径。这里就为大家推荐2款非常实用的压缩工具：
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章: