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

 更新时间:2014年02月24日 15:06:24   作者:   我要评论

访问修改DOM元素都会导致浏览器重新计算页面的几何变化,下面为大家介绍下javascript性能提升方法,需要的朋友可以参考下
访问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的次数。

相关文章

  • 深入浅出ES6之let和const命令

    深入浅出ES6之let和const命令

    这篇文章主要介绍了ES6中let和const命令的相关资料,非常不错,具有参考借鉴价值,对es6 let const相关知识感兴趣的朋友一起看下吧
    2016-08-08
  • javascript实现拖拽并替换网页块元素

    javascript实现拖拽并替换网页块元素

    实现类似于学生换座位的效果,将网页内的两个元素通过拖拽的方式互换。
    2009-11-11
  • D3.js实现文本的换行详解

    D3.js实现文本的换行详解

    相信大家都知道在SVG中添加文本是使用text元素。但这个元素不能够自动换行,超出的部分就显示不出来了,怎么办呢?下面通过这篇文章来给大家详细介绍下实现的过程。
    2016-10-10
  • js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME

    js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME

    这套排序机制同时兼容了IE和ff 可以实现所有浏览器下排序的统一哦
    2011-12-12
  • js中switch case循环实例代码

    js中switch case循环实例代码

    这篇文章主要介绍了js中switch case循环实例代码,有需要的朋友可以参考一下
    2013-12-12
  • js中cookie的使用详细分析

    js中cookie的使用详细分析

    JavaScript中的另一个机制:cookie,则可以达到真正全局变量的要求。 cookie是浏览器 提供的一种机制,它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制,而并不是JavaScript本身的性质。
    2008-05-05
  • JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版

    JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版

    前天熬了大半宿发了一篇[一行代码轻松搞定快捷留言功能],同时发布了V1.0beta版的快捷留言功能和源代码,之所以是beta版,就是当时感觉虽然基本功能有了,但是还不够完善,特性也不一定合理
    2010-04-04
  • js 函数式编程学习笔记

    js 函数式编程学习笔记

    这两天看书看到了函数式编程那节,感觉学到了挺多东西,之前看别人代码都写的挺漂亮,现在我写的代码是有点乱,所以还是要学习下别人的编程模式
    2017-03-03
  • javascript实现控制div颜色

    javascript实现控制div颜色

    本文给大家分享的是使用javascript实现控制DIV背景色的代码,非常的简单实用,有需要的小伙伴可以参考下。
    2015-07-07
  • 微信小程序实现获取准确的腾讯定位地址功能示例

    微信小程序实现获取准确的腾讯定位地址功能示例

    这篇文章主要介绍了微信小程序实现获取准确的腾讯定位地址功能,结合实例形式详细分析了微信小程序使用腾讯地理位置接口的相关注册、操作步骤及接口使用技巧,需要的朋友可以参考下
    2019-03-03

最新评论