前端JS循环的性能提升

前端项目开发需求 前端开发项目职责 前端实战项目开发

循环在任何编程语言中都会大量的使用,在js中也不例外。对于js来说,循环也有其特殊之处,这边笔记主要写的是JS中性能提升。

·首先要来和大家统一一下概念,下面是for循环的基本概念

for循环按照如下顺序执行:①→②→③→④→②→③→④
所以大家可以看到①循环初始化语句只执行一次,而其他三步每次循环都执行。

·接下来可以从四方面入手,来进行性能优化

①递减迭代

正如上面图片所示,大多数情况,开发者喜欢递增的方式进行迭代,即从0开始增加到某个特定值为止。而事实上,递减的迭代会更高效。

②简化循环条件语句

循环条件语句再每次循环都进行运算,所以要尽量是其精简。
先举一个反例
javascript 代码

for (var i = 0; i < document.images.length; i++) {
    //处理document.images[i]</p>
}

在这个例子中,由于循环条件语句每次循环都执行,所以他每次都会进行一次document.images的遍历,而通常DOM操作是非常耗时的。
我们可以尝试做下面的优化:
javascript 代码

for (var i = 0, len = document.images.length; i < len; i++) {
    //处理document.images[i]</p>
}

把循环条件语句中的DOM访问结果缓存历来,这样整个循环只会访问一次DOM了,大大提升了性能。

在所有的浏览器中,通过将html容器上需要遍历的次数缓存起来都会大大提升速度。其中在Safari 3中速度会提高两倍,而在IE7中速度会提高170倍

③简化循环体

循环体是执行最多的,所以要确保其被最大限度地优化。应该尽量移除哪些密集的计算。

④合并循环条件和更新语句

javascript 代码

var i,
    someArray = []
for (i = someArray.length; i–; ) {
    //处理someArray[i]
}

上面的代码中,将循环用到的变量声明都提前,这样可以提升一部分效率;条件语句为i–,这样使得i同0比较,而不是与数组的长度比较,这样也挺高了效率;
此外还去除了更新语句。

web前端小型开发项目流程 前端开发项目架构 前端开发项目功能描述

» 本文来自:前端开发者 » 《前端JS循环的性能提升》
» 本文链接地址:https://www.rokub.com/5460.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!