深入理解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中的call实现继承
Jan 22 Javascript
基于jquery的分页控件(C#)
Jan 06 Javascript
仿jQuery的siblings效果的js代码
Aug 09 Javascript
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
jQuery阻止同类型事件小结
Apr 19 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
innerText 使用示例
Jan 23 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
Feb 23 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
AngularJs 指令详解及示例代码
Sep 01 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
Bootstrap如何激活导航状态
Mar 22 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
2006/12/14 PHP
PHP7多线程搭建教程
2017/04/21 PHP
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
使用PDB模式调试Python程序介绍
2015/04/05 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
生物技术毕业生自荐信
2013/10/23 职场文书
外贸业务员的岗位职责
2013/11/23 职场文书
工作表扬信的范文
2014/01/10 职场文书
党员一句话承诺大全
2014/03/28 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
公司贷款承诺书
2014/05/30 职场文书
档案工作个人总结
2015/03/03 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
大学班干部竞选稿
2015/11/20 职场文书
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers