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 相关文章推荐
namespace.js Javascript的命名空间库
Oct 11 Javascript
JS修改css样式style浅谈
May 06 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 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 实现进制相互转换
2016/04/07 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
从Python的源码来解析Python下的freeblock
2015/05/11 Python
python数据封装json格式数据
2018/03/04 Python
python实现顺序表的简单代码
2018/09/28 Python
python判断输入日期为第几天的实例
2018/11/13 Python
用Python逐行分析文件方法
2019/01/28 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
经济管理专业求职信
2014/06/09 职场文书
电工实训心得体会
2016/01/14 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
redis限流的实际应用
2021/04/24 Redis
MySQL GTID复制的具体使用
2022/05/20 MySQL