js 性能优化之算法和流程控制
循环处理是最常见的编程模式之一，也是提升性能必须关注的要点之一。
常见的优化方案有：
①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;
}
}
取某次测试结果：
平均来说，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%）。总的来说，循环次数大的情况下，运行时间确实有提升。取某次结果如下:
没有局部存量存储数组长度时：
有局部变量存储数组长度时：
③减少迭代次数，“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中的finally()方法和Filter()方法详解
finally是 JavaScript 构造中使用的方法try-catch,Filter() 是 JavaScript 中的一种方法,可以通过处理数组轻松提供过滤后的输出数据,本文就给大家详细的介绍一下JavaScript中的finally()方法和Filter()方法,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了JS实现移动端双指缩放和旋转方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
webpack 中实现模块化的核心就是 __webpack_require__ 函数，无论是commonjs模块化还是es 模块都是通过该函数来导入的，这篇文章主要介绍了webpack模块化的原理,需要的朋友可以参考下2023-02-02![javascript charAt() arr[i]数组实例代码](//img.jbzj.com/images/xgimg/bcimg3.png)
javascript charAt() arr[i]数组实例代码
实例区别一下charAt()和arr[i].toString()的使用方法2008-08-08
这篇文章主要介绍了JS实现图片转换成base64的各种应用场景,结合实例形式分析了javascript实现图片转换成base64的各种应用场景的相关操作技巧与使用注意事项,需要的朋友可以参考下2018-06-06
这篇文章主要为大家详细介绍了JavaScript实现网页跨年倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了JavaScript动态添加css样式和script标签的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
这篇文章主要介绍了JavaScript eval()函数定义及使用方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
这篇文章主要介绍了ES6 迭代器(Iterator)和 for.of循环使用方法学习总结,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
JavaScript中关键字 var、let、const的区别详解
在JavaScript中,var、let和const是用于声明变量的关键字,它们之间存在一些区别,这篇文章就给大家详细介绍一下它们之间的区别,文章通过代码示例介绍的非常详细,需要的朋友可以参考下2023-08-08
![javascript charAt() arr[i]数组实例代码](http://img.jbzj.com/images/xgimg/bcimg3.png)
最新评论