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 相关文章推荐
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
React Native实现地址挑选器功能
Oct 24 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
vue ssr 指南详读
2018/06/29 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
python科学计算之narray对象用法
2019/11/25 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
学校门卫岗位职责
2014/03/16 职场文书
交通工程专业推荐信
2014/09/06 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
留学推荐信中文范文
2015/03/26 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
Redis实现一个账号只能登录一个设备
2022/04/19 Redis
mysql数据库隔离级别详解
2022/06/16 MySQL