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 相关文章推荐
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
javascript中call apply 与 bind方法详解
Mar 10 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
JS原生实现轮播图的几种方法
Mar 23 Javascript
7个你应该知道的JS原生错误类型
Apr 29 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
晶体管单管来复再生式收音机
2021/03/02 无线电
php实现遍历文件夹的方法汇总
2017/03/02 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
Python函数生成器原理及使用详解
2020/03/12 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
python3将变量输入的简单实例
2020/08/19 Python
Python实现手势识别
2020/10/21 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
四好少年事迹材料
2014/01/12 职场文书
教师网络培训感言
2014/03/09 职场文书
学习张林森心得体会
2014/09/10 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
礼貌问候语大全
2015/11/10 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python