减少访问DOM的次数提升javascript性能


Posted in Javascript onFebruary 24, 2014

访问DOM元素是有代价的,修改DOM元素则更为昂贵,因为它会导致浏览器重新计算页面的几何变化。

当然,最坏的情况是在循环中访问修改元素,尤其是对HTML元素集合循环操作。

例如:

<!-- 优化前 --> 
<script type="text/javascript"> 
function innerHTMLLoop () { 
for(var count = 0; count < 15000; count++){ 
document.getElementById('here').innerHTML+='a'; 
} 
} 
</script>

这个函数循环修改页面元素的内容。这段代码的问题在于,每次循环迭代,该元素都被访问两次:一次读取innerHTML属性,另外一次重写它。

一个效率更高的做法是使用局部变量存储更新后的内容,然后在循环结束后一次性写入:

<!-- 优化后 --> 
<script type="text/javascript"> 
function innerHTMLLoop () { 
var content = ''; 
for(var count = 0; count < 15000; count++){ 
content+='a'; 
} 
document.getElementById('here').innerHTML+=content; 
} 
</script>

访问DOM的次数越多,代码运行速度越慢。因此,在有其他方案可以代替的时候,我们要尽量减少访问DOM的次数。
Javascript 相关文章推荐
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 #Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 #Javascript
对table和ul实现js分页示例分享
Feb 24 #Javascript
jquery.post用法之type设置问题
Feb 24 #Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 #Javascript
js获得页面的高度和宽度的方法
Feb 23 #Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 #Javascript
You might like
Discuz! Passport 通行证整合
2008/03/27 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
超级退弹代码
2008/07/07 Javascript
js取得url地址参数实例
2013/02/22 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
js常用数组操作方法简明总结
2014/06/20 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
JS中数据结构之栈
2019/01/01 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
python实现从字典中删除元素的方法
2015/05/04 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
Python如何实现定时器功能
2020/05/28 Python
python类共享变量操作
2020/09/03 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
办公室文员工作自我评价
2013/12/01 职场文书
农村文化建设标语
2014/10/07 职场文书
保外就医申请书范文
2015/08/06 职场文书
MYSQL如何查看进程和kill进程
2022/03/13 MySQL