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 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
Apr 03 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
浅析Vue 生命周期
Jun 21 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
Node+OCR实现图像文字识别功能
Nov 26 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 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
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
python批量提交沙箱问题实例
2014/10/08 Python
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
Python函数装饰器实现方法详解
2018/12/22 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
Python的条件锁与事件共享详解
2019/09/12 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
护理专业的自荐信
2013/10/22 职场文书
植树节活动总结
2014/04/30 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS