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 相关文章推荐
Javascript的闭包
Dec 31 Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
Mar 28 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
解决vue admin element noCache设置无效的问题
Nov 12 Javascript
node运行js获得输出的三种方式示例详解
Jul 02 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
我的论坛源代码(六)
2006/10/09 PHP
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
餐饮加盟计划书
2014/01/10 职场文书
策划总监岗位职责
2014/02/16 职场文书
中等生评语大全
2014/05/04 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
成绩单评语
2015/01/04 职场文书
自我检讨书范文
2015/01/28 职场文书
参观邀请函范文
2015/02/02 职场文书
创业计划书之便利店
2019/09/05 职场文书
浅谈Redis中的RDB快照
2021/06/29 Redis
解决vue中provide inject的响应式监听
2022/04/19 Vue.js