深入理解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 相关文章推荐
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 Javascript
详解JS数组方法
Nov 20 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
德生H-501的评价与改造
2021/03/02 无线电
php连接数据库代码应用分析
2011/05/29 PHP
php 缩略图实现函数代码
2011/06/23 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
报到证丢失证明
2014/01/11 职场文书
会议主持词
2014/03/17 职场文书
文明村创建实施方案
2014/03/27 职场文书
语文教研活动总结
2014/07/02 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
2016春节慰问信范文
2015/03/25 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL