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


Posted in Javascript onDecember 12, 2015

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

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

1、最小化DOM更新

看下面例子:

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);

更多关于 文档碎片,详见之前文章 《JavaScript文档碎片操作实例分析》

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、使用事件委托

详见之前文章 《javascript性能优化之事件委托实例详解》

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将NodeList作为Array数组处理的方法》

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

Javascript 相关文章推荐
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
javascript实现获取服务器时间
May 19 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
Sep 10 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
Vue Router中应用中间件的方法
Aug 06 Javascript
JavaScript文档碎片操作实例分析
Dec 12 #Javascript
javascript性能优化之事件委托实例详解
Dec 12 #Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 #Javascript
jQuery Validate初步体验(二)
Dec 12 #Javascript
jQuery Validate初步体验(一)
Dec 12 #Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 #Javascript
jQuery同步提交示例代码
Dec 12 #Javascript
You might like
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
根德YB400的电路分析
2021/03/02 无线电
discuz安全提问算法
2007/06/06 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
清除输入框内的空格
2016/12/21 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
会话Bean的种类
2013/11/07 面试题
实现向右循环移位
2014/07/31 面试题
初一学生评语大全
2014/04/24 职场文书
学校春季防火方案
2014/06/08 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
使用Ajax实现无刷新上传文件
2022/04/12 Javascript