减少访问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 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
WordPress JQuery处理沙发头像
Jun 22 Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
用Juery网页选项卡实现代码
Jun 13 Javascript
JavaScript手机振动API
Jun 11 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
JS实现网页时钟特效
Mar 25 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 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
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
php cookis创建实现代码
2009/03/16 PHP
PHP中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
php中spl_autoload详解
2014/10/17 PHP
PHP children()函数讲解
2019/02/03 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
在Django的视图中使用form对象的方法
2015/07/18 Python
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
python的文件操作方法汇总
2017/11/10 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
探亲假请假条
2014/04/11 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
校友会致辞
2015/07/30 职场文书
环保建议书作文500字
2015/09/14 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
中学音乐课教学反思
2016/02/18 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js