减少访问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访问XML数据的实例
Dec 27 Javascript
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
用js实现计算加载页面所用的时间
Apr 02 Javascript
jquery自定义属性(类型/属性值)
May 21 Javascript
jquery特效 幻灯片效果示例代码
Jul 16 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
详解Vue-axios 设置请求头问题
Dec 06 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
bootstrap实现tab选项卡切换
Aug 09 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
一个程序下载的管理程序(一)
2006/10/09 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
PHP安全性漫谈
2012/06/28 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
php实现的ping端口函数实例
2014/11/12 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
解析Python中的__getitem__专有方法
2016/06/27 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
使用Python更换外网IP的方法
2018/07/09 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
校园招聘策划书
2014/01/09 职场文书
接受捐赠答谢词
2014/01/27 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
争做文明公民倡议书
2014/08/29 职场文书
六查六看自查报告
2014/10/14 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
教务处干事工作总结
2015/08/14 职场文书
JavaScript流程控制(分支)
2021/12/06 Javascript
SQLServer常见数学函数梳理总结
2022/08/05 MySQL