深入理解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 DOM事件模型的两件事
Jul 22 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
超全面的javascript中变量命名规则
Feb 09 Javascript
纯js实现动态时间显示
Sep 07 Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 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
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
淘宝ip地址查询类分享(利用淘宝ip库)
2014/01/07 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
JS实现小米轮播图
2020/09/21 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
python pickle 和 shelve模块的用法
2013/09/16 Python
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
python3 pygame实现接小球游戏
2019/05/14 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
中软国际Java程序员笔试题
2014/07/19 面试题
会计系中文个人求职信
2013/12/24 职场文书
优秀学生评语大全
2014/04/25 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
redis 查看所有的key方式
2021/05/07 Redis
Go timer如何调度
2021/06/09 Golang