javascript性能优化之DOM交互操作实例分析
网络编程 2021-07-04 21:04www.168986.cn编程入门
这篇文章主要介绍了javascript性能优化之DOM交互操作技巧,结合实例形式总结分析了JavaScript针对DOM操作过程中的各种常见优化操作技巧,需要的朋友可以参考下
本文实例讲述了javascript性能优化之DOM交互操作技巧。分享给大家供大家参考,具体如下:
在javascript各个方面,DOM毫无疑问是最慢的一部分。DOM操作与交互要耗费大量时间,因为它们往往需要重新渲染整个页面或者某一部分。理解如何优化与DOM的交互可以极大提高脚本完成的速度。
1、最小化DOM更新
看狼蚁网站SEO优化例子:
var list = document.getElementById("ul"); for (var i=0; i < 10; i++){ var item = document.createELement("li"); item.appendChild(document.createTextNode("item" + i)); list.appendChild(item); } //这段代码为列表添加10个项目。添加每个项目时,都有两次DOM更新。总共需要20次DOM更新。
我们可以使用 文档碎片 来最小化DOM更新。
var list = document.getElementById("ul"); var fragment = document.createDocumentFragment(); for (var i=0; i < 10; i++){ var item = document.createELement("li"); item.appendChild(document.createTextNode("item" + i)); fragment.appendChild(item); } list.appendChild(fragment);
更多关于 文档碎片,详见之前文章 《》
2、使用innerHTML
对于比较大的DOM更改,使用innerHTML要比createElement()和appendChild()快。
var list = document.getElementById("ul"); var html = ""; for (var i=0; i < 10; i++){ html += "<li>item" + i + "<li>"; } list.innerHTML = html;
3、使用事件委托
详见之前文章 《》
4、注意NodeList
最小化访问NodeList的次数可以极大的改进脚本的性能,因为每次访问NodeList,都会运行一次基于文档的查询。
var imgs = document.getElementsByTagName("img"); for (var i=0, len=imgs.length; i < len; i++){ var image = imgs[i]; //more code } //这里的关键是长度length存入了len变量,而不是每次都去访问NodeList的length属性。当在循环中使用NodeList的时候,把imgs[i]放入image变量中,以避免在循环体内多次调用NodeList;
更多关于 NodeList,详见之前文章 《》
希望本文所述对大家JavaScript程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程