深入理解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 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
记录几个javascript有关的小细节
Apr 02 Javascript
JavaScript 继承详解 第一篇
Aug 30 Javascript
按钮JS复制文本框和表格的代码
Apr 01 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
深入理解ES7的async/await的用法
Sep 09 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
vue 开发企业微信整合案例分析
Dec 02 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 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 addslashes和mysql_real_escape_string
2010/01/24 PHP
PHP 检查扩展库或函数是否可用的代码
2010/04/06 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
母亲80寿诞答谢词
2014/01/16 职场文书
成龙洗发水广告词
2014/03/14 职场文书
药剂专业求职信
2014/06/20 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
商业计划书格式、范文
2019/03/21 职场文书