js 性能优化之算法和流程控制


Posted in Javascript onFebruary 15, 2017

循环处理是最常见的编程模式之一,也是提升性能必须关注的要点之一。

常见的优化方案有:

①JavaScript的四种循环(for、do-while、while、for-in)中,for-in循环比其他几种明显要慢。由于每次迭代操作会同时搜索实例或原型属性,for-in循环的每次迭代都会产生更多的开销,所以比其他类型要慢。因此遍历一个属性数量有限的已知属性列表,可以这样优化:

var props = ['prop1', 'prop2'],i = 0;
whlie(i < props.length){
 precess(object[props[i++]]);
}

该代码只关注给定的属性,减少了循环的开销。

而对于,for、while、do-while。我在chrome下测试了一下,先创建一个大小为1000000的数组,每项乘100再叠加。

测试用例:

window.onload = function(){
var items = Array(1000000).join(',').split(',').map(function(item, index) {
 return index;
});
 console.log(forCircle())
 console.log(whileCircle())
 console.log(doCircle())
function forCircle(){
console.profile();
var currTime = new Date();
 var tal = 0;
 for(var i = 0;i < items.length; i++){
  tal = tal + process(items[i]);
 }
 console.profileEnd();
 console.log('forCircle用时:' + (new Date() - currTime) + 'ms');
 return tal;
}
function whileCircle(){
console.profile();
var currTime = new Date();
 var tal = 0;
 var j = 0;
 while (j < items.length){
  tal = tal + process(items[j++]);
 }
 console.profileEnd();
 console.log('whileCircle用时:' + (new Date() - currTime) + 'ms');
 return tal;
}
function doCircle(){
console.profile();
var currTime = new Date();
 var tal = 0;
 var k = 0;
 do{
  tal = tal + process(items[k++]);
 }while (k < items.length)
  console.profileEnd();
 console.log('doCircle用时:' + (new Date() - currTime) + 'ms');
 return tal;
}
function process(item){
 return item*100;
}
}

取某次测试结果:

js 性能优化之算法和流程控制

js 性能优化之算法和流程控制

js 性能优化之算法和流程控制

平均来说,for循环耗时8ms,while耗时4ms,doWhile耗时也是4ms。for是最慢的。

②减少迭代的工作量。把数组长度保存在局部变量中再遍历、颠倒数组的遍历顺序。

最常见的一个循环:

for(var i = 0;i < items.length; i++){
 process(items[i]);
}
//
var j = 0;
while (j < items.length){
 process(items[j++]);
}
//
var k = 0;
do{
 process(items[k++]);
}while (k < items.length)

在这个循环中,每次运行都会产生如下操作:

①查找一次属性(items.length)

②执行数值比较一次(i < items.length) 

③查看控制条件是否为true(i < items.length ==true) 

④一次自增操作(i++)

⑤一次数组查找(items[i])

⑥一次函数调用(process(items[i]))

若把数组长度存到一个局部变量,那么就不需要每次都查找一次items.length,也就提高了性能。

改为这样:

for(var i = 0, len = items.length;i < len; i++){
 process(items[i]);
}
//
var j = 0,
count = items.length;
while (j < count){
 process(items[j++]);
}
//
var k = 0,
num = items.length;
do{
 process(items[k++]);
}while (k < num)

这样在大多数浏览器中能节省大概25%的运行时间(IE中甚至可以节省50%)。总的来说,循环次数大的情况下,运行时间确实有提升。取某次结果如下:

没有局部存量存储数组长度时:

js 性能优化之算法和流程控制

有局部变量存储数组长度时:

js 性能优化之算法和流程控制

③减少迭代次数,“Duffs Device”即“达夫设备“循环体展开技术。适合于迭代次数较大的情况下。

摘抄一下书中达夫设备的基本理念:每次循环中最多可 8 次调用 process()函数。循环迭代次数为元素总数除以8。 因为总数不一定是 8的整数倍, 所以 startAt 变量存放余数, 指出第一次循环中应当执行多少次 process()。比方说现在有 12 个元素,那么第一次循环将调用 process()4次,第二次循环调用 process()8 次,用 2 次循环代替了 12次循环。

基本模式:

var iterations = Math.floor(items.length/8), 
 startAt = items.length%8, 
 i = 0; 
do{ 
 switch(startAt){ 
  case 0 : process(items[i++]); 
  case 7 : process(items[i++]); 
  case 6 : process(items[i++]); 
  case 5 : process(items[i++]); 
  case 4 : process(items[i++]); 
  case 3 : process(items[i++]); 
  case 2 : process(items[i++]); 
  case 1 : process(items[i++]); 
 } 
 startAt = 0; 
 }while(--iterations);

④基于函数的迭代比基于循环的迭代消耗性能更多。例:for循环迭代与forEach函数迭代。 

⑤优化if-else,通常来说,switch比if-else快,但是在判断条件较多时,使用查找表比if-else和switch都快。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木! 

Javascript 相关文章推荐
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
js保留两位小数方法总结
Jan 31 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 Javascript
微信小程序 常用工具类详解及实例
Feb 15 #Javascript
微信小程序 基础知识css样式media标签
Feb 15 #Javascript
js 性能优化之快速响应的用户界面
Feb 15 #Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 #Javascript
DOM事件探秘篇
Feb 15 #Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 #Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 #Javascript
You might like
人大复印资料处理程序_查询篇
2006/10/09 PHP
PHP备份/还原MySQL数据库的代码
2011/01/06 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
如何用php获取文件名后缀
2013/06/09 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
php 数组元素快速去重
2017/05/05 PHP
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
JavaScript实现alert弹框效果
2020/11/19 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
Python判断操作系统类型代码分享
2014/11/22 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
python中的字典操作及字典函数
2018/01/03 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
英语专业学生个人求职信范文
2014/01/06 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
公司酒会主持词
2015/07/02 职场文书
一年级语文教学随笔
2015/08/14 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书