当前位置：首页 > 资讯 > 技术文档

深入理解Javascript中的循环优化

时间：2022-07-19 11:11 编辑：来源：阅读：
扫一扫，手机访问

摘要：深入理解Javascript中的循环优化

循环是大多数编程语言都具备的基本功能，JS也不例外，不同之处在于JS是解释型语言，运行于浏览器环境中，客户端的软硬件条件会对JS执行效率产生很大的影响。然而客户端环境对于开发者是未知、多样的，并且难以改变，所以优化代码质量是提高代码效率的主要途径。 JS代码中，循环是比较容易导致性能问题的因素。理解循环特性进而有针对性地进行优化也许会带来不错的性能提升。 for、while、do-while循环：这三种循环本身的循环效率相差不多，所以只要根据适合的应用场景选择即可。以for循环为例：

[u]复制代码[/u] 代码如下:

var aValues = ["a", "b", "c", "d"];
for(var i = 0; i < aValues.length; i += 1){
 fDoSomethingA(aValues[i]);
 fDoSomethingA(aValues[i]);
}

上面例子中每次循环都要比较i与数组的长度，所以每次都要重新读取数组长度，由如果数组长度在循环中是不变的，这样做就没有必要，我们可以使用局部变量代替length的读取。同理，例子中，aValues[i]由于被读取两次以上，我们也可以将它赋值给局部变量：

[u]复制代码[/u] 代码如下:

var aValues = ["a", "b", "c", "d"], nLength = aValues.length;
 for(var i = 0, sValue; i < nLength; i += 1){
 sValue = aValues[i];
 fDoSomethingA(sValue);
 fDoSomethingB(sValue);
 }

如果循环的业务逻辑对循环顺序不敏感，可以尝试倒序循环，即将计数器递减到0。

[u]复制代码[/u] 代码如下:

var aValues = ["a", "b", "c", "d"], nLength = aValues.length;
 for(var i = nLength, sValue; i -= 1;){
 sValue = aValues[i];
 fDoSomethingA(sValue);
 fDoSomethingB(sValue);
 }

使用这种方式计数器默认与0进行比较，连局部变量比较都省略了，理论上也能提高效率。 for-in循环： for-in循环更像在穷举，他用来遍历对象属性，我们知道对象属性的查找会一直延续到原型链顶端，这将大大降低循环效率。for-in循环的写法上没有什么优化空间，需要在使用时遵循一定原则：尽量只在遍历数据型对象的时候才使用for-in循环。如果遍历对象的属性是明确的，可以使用数组循环替代。例如遍历一个联系人对象：

[u]复制代码[/u] 代码如下:

var aContact = ["N", "FN", "EMAIL;PREF", ...];
 for(var i = aContact.length; i -= 1;){
 fDoSomething(aContact[i]);
 }
 

Duff策略 Duff策略的主要原理是通过展开循环减少次数来提高效率。例如一个普通循环:

[u]复制代码[/u] 代码如下:

for(var i = aValues.length; i -= 1){
 fDoSomething(aValues[i]);
 }
 

如果aValues.length == N，写成以下这种方式的效率将比循坏来的高:

[u]复制代码[/u] 代码如下:

fDoSomething(aValues[0]);
 fDoSomething(aValues[1]);
 fDoSomething(aValues[2]);
 fDoSomething(aValues[3]);
 ...
 ...
 fDoSomething(aValues[N-1]);

但如果N很大，这种写法就不现实，而Duff策略是一种适中的循环展开策略。近日在网易邮箱通讯录联系人的初始化循环中加入了Duff策略：

[u]复制代码[/u] 代码如下:

var nLength = aContacts.length,
// 总轮数
 nRounds = Math.floor( nLength / 8),
// 额外余量
 nLeft = nLength % 8,
i = 0;
// 先处理余量
 if(nLeft){
 do{
 fFormat(aContacts[i ++]);
 }while(-- nLeft)
}
// 每轮执行8次格式化
 if(nRounds){
 do{
 fFormat(aContacts[i ++]);
 fFormat(aContacts[i ++]);
 fFormat(aContacts[i ++]);
 fFormat(aContacts[i ++]);
 fFormat(aContacts[i ++]);
 fFormat(aContacts[i ++]);
 fFormat(aContacts[i ++]);
 fFormat(aContacts[i ++]);
 }while(-- nRounds)
 }

如上所示，每轮循环可以执行8个联系人数据的格式化操作，还有一轮循环用于处理余下的联系人。由此可见，在联系人较多的情况下总的循环次数大大降低，可以降低循环的消耗。另外，8是Duff策略提出的最优值。实际测试时发现在IE下可以带来10-20%以上的性能提升，而非IE浏览器中几乎看不到区别。结束语：在测试过程中发现非IE浏览器下，优化后和优化前的效率差距并不是很大，甚至可以忽略，这说明这些浏览器的JS引擎对

全部评论(0)

上一篇：js实现人民币大写金额形式转换
下一篇：JS实现将数字金额转换为大写人民币汉字的方法

资讯排行榜
更多>>