深入理解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 相关文章推荐
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
jQuery实现限制文本框的输入长度
Jan 11 Javascript
vue组件学习教程
Sep 09 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
原生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
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
php获取从百度、谷歌等搜索引擎进入网站关键词的方法
2015/07/08 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
jquery里的each使用方法详解
2010/12/22 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
python解析xml文件实例分析
2015/05/27 Python
python实现八大排序算法(1)
2017/09/14 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
python实战教程之自动扫雷
2018/07/13 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
django-filter和普通查询的例子
2019/08/12 Python
什么样的创业计划书可行性高?
2014/02/01 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
golang中的并发和并行
2021/05/08 Golang
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android
javascript的setTimeout()使用方法总结
2021/11/20 Javascript