深入理解Javascript中的循环优化_Javascript教程-查字典教程网
深入理解Javascript中的循环优化
深入理解Javascript中的循环优化
发布时间:2016-12-30 来源:查字典编辑
摘要:循环是大多数编程语言都具备的基本功能,JS也不例外,不同之处在于JS是解释型语言,运行于浏览器环境中,客户端的软硬件条件会对JS执行效率产生...

循环是大多数编程语言都具备的基本功能,JS也不例外,不同之处在于JS是解释型语言,运行于浏览器环境中,客户端的软硬件条件会对JS执行效率产生很大的影响。然而客户端环境对于开发者是未知、多样的,并且难以改变,所以优化代码质量是提高代码效率的主要途径。

JS代码中,循环是比较容易导致性能问题的因素。理解循环特性进而有针对性地进行优化也许会带来不错的性能提升。

for、while、do-while循环:

这三种循环本身的循环效率相差不多,所以只要根据适合的应用场景选择即可。

以for循环为例:

复制代码 代码如下:

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]由于被读取两次以上,我们也可以将它赋值给局部变量:

复制代码 代码如下:

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。

复制代码 代码如下:

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循环。

如果遍历对象的属性是明确的,可以使用数组循环替代。

例如遍历一个联系人对象:

复制代码 代码如下:

var aContact = ["N", "FN", "EMAIL;PREF", ...];

for(var i = aContact.length; i -= 1;){

fDoSomething(aContact[i]);

}

Duff策略

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

一个普通循环:

复制代码 代码如下:

for(var i = aValues.length; i -= 1){

fDoSomething(aValues[i]);

}

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

复制代码 代码如下:

fDoSomething(aValues[0]);

fDoSomething(aValues[1]);

fDoSomething(aValues[2]);

fDoSomething(aValues[3]);

...

...

fDoSomething(aValues[N-1]);

但如果N很大,这种写法就不现实,而Duff策略是一种适中的循环展开策略。

近日在网易邮箱通讯录联系人的初始化循环中加入了Duff策略:

复制代码 代码如下:

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引擎对

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类