深入理解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 11 Javascript
JavaScript 图像动画的小demo
May 23 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
原生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扩展介绍与开发教程
2010/08/19 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
详解YII关联查询
2016/01/10 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
javascript 动态生成私有变量访问器
2009/12/06 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
手机业务员岗位职责
2013/12/13 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js