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获取url上某个参数的方法
Nov 08 Javascript
js获取和设置属性的方法
Feb 20 Javascript
jquery插件之定时查询待处理任务数量
May 01 Javascript
分享纯手写漂亮的表单验证
Nov 19 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
原生js检测页面加载完毕的实例
Sep 11 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 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系统流量分析的程序
2006/10/09 PHP
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
PHP生成唯一订单号
2015/07/05 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
Python匿名函数及应用示例
2019/04/09 Python
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
留学自荐信
2013/10/10 职场文书
商务考察邀请函范文
2014/01/21 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
小学教师评语大全
2014/04/23 职场文书
供用电专业求职信
2014/07/07 职场文书
合作协议书模板2014
2014/09/26 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
MySQL学习必备条件查询数据
2022/03/25 MySQL
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL