深入理解Javascript中的循环优化


Posted in Javascript onNovember 09, 2013

循环是大多数编程语言都具备的基本功能,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与cookie 的问题详解
Nov 11 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
在js中做数字字符串补0(js补零)
Mar 25 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
JS实现导航栏楼层特效
Jan 01 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 #Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 #Javascript
window.onresize 多次触发的解决方法
Nov 08 #Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 #Javascript
setTimeout和setInterval的深入理解
Nov 08 #Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 #Javascript
jquery ajax修改全局变量示例代码
Nov 08 #Javascript
You might like
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
Python 实现简单的电话本功能
2015/08/09 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
Python用户自定义异常的实现
2020/12/25 Python
python数据抓取3种方法总结
2021/02/07 Python
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
物流仓管员岗位职责
2013/12/04 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
培训班主持词
2014/03/28 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
单位介绍信格式范文
2015/05/04 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript