深入理解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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
jquery得到font-size属性值实现代码
Sep 30 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 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
php 随机排序广告的实现代码
2011/05/09 PHP
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
解析php中curl_multi的应用
2013/07/17 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
jquery按回车提交数据的代码示例
2013/11/05 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
python3抓取中文网页的方法
2015/07/28 Python
Python读取properties配置文件操作示例
2018/03/29 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
python实现简单颜色识别程序
2020/02/19 Python
python实现拼接图片
2020/03/23 Python
python获取整个网页源码的方法
2020/08/03 Python
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
幼儿教师考核制度
2014/01/25 职场文书
主题班会演讲稿
2014/05/22 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
单方投资意向书
2015/05/11 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python