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 14 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
vue-property-decorator用法详解
Dec 12 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 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
php xml实例 留言本
2009/03/20 PHP
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
Python语法快速入门指南
2015/10/12 Python
Python中常见的异常总结
2018/02/20 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
彪马日本官网:PUMA日本
2019/01/31 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
考试退步检讨书
2014/01/15 职场文书
家长写给孩子的评语
2014/04/18 职场文书
ktv筹备计划书
2014/05/03 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
教师文明餐桌光盘行动倡议书
2015/04/28 职场文书
小学大队长竞选稿
2015/11/20 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
MySQL RC事务隔离的实现
2022/03/31 MySQL