减少访问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关于select的相关操作说明
Jan 13 Javascript
用js来解决ajax读取页面乱码
Nov 28 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
JS实现页面数据懒加载
Feb 13 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 JSON格式数据交互实例代码详解
2011/01/13 PHP
ajax 的post方法实例(带循环)
2011/07/04 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
php实现两个数组相加的方法
2015/02/17 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
JS作用域深度解析
2016/12/29 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
Python实现全角半角转换的方法
2014/08/18 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
python输入错误后删除的方法
2019/10/12 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
给医务人员表扬信
2014/01/12 职场文书
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
房屋租房协议书范本
2014/12/04 职场文书
活动主持人开场白
2015/05/28 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android
Redis批量生成数据的实现
2022/06/05 Redis