深入理解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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
dess中一个简单的多路委托的实现
Jul 20 Javascript
浏览器常用高宽的jquery插件
Feb 24 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
JQuery删除DOM节点的方法
Jun 11 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 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中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
jquery 插件学习(二)
2012/08/06 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
利用python实现命令行有道词典的方法示例
2017/01/31 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
python3实现基于用户的协同过滤
2018/05/31 Python
python批量下载抖音视频
2019/06/17 Python
django settings.py 配置文件及介绍
2019/07/15 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
HTML5标签大全
2016/11/23 HTML / CSS
即将毕业大学生自荐信
2014/01/24 职场文书
电大本科自我鉴定
2014/02/05 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS
详解MySQL的内连接和外连接
2023/05/08 MySQL