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 相关文章推荐
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
JQuery控制Radio选中方法分析
May 29 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
微信小程序实现图片上传功能
May 28 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 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框架表单验证操作方法
2017/07/19 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
由document.body和document.documentElement想到的
2009/04/13 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
一个简单的js动画效果代码
2010/07/20 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
Python对象体系深入分析
2014/10/28 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
基于Python的接口测试框架实例
2016/11/04 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
python tkinter组件摆放方式详解
2019/09/16 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
python中的itertools的使用详解
2020/01/13 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
最新教师自我评价分享
2013/11/12 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
中学生检讨书1000字
2014/10/28 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
千手观音观后感
2015/06/03 职场文书