减少访问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 相关文章推荐
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
node.js中的fs.readlink方法使用说明
Dec 17 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
JQuery 又谈ajax局部刷新
Nov 27 jQuery
基于vue.js 2.x的虚拟滚动条的示例代码
Jan 23 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 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
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
php htmlspecialchars加强版
2010/02/16 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
php四种定界符详解
2017/02/16 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
python使用mysql的两种使用方式
2018/03/07 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
个人思想理论学习的自我鉴定
2013/11/30 职场文书
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
高中教师评语大全
2014/04/25 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
本科应届生求职信
2014/08/05 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
赔偿协议书范本
2014/09/12 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
婚姻出轨保证书
2015/05/08 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
索尼ICF-36收音机评测
2022/04/30 无线电