如何优化js代码(2)—

2、for循环
for循环是我们经常会遇到的情况，我们先看看下面例子：

<input type="button" value="效率低" onclick="func1()"/>

<input type="button" value="效率高" onclick="func2()"/>

var arr = [];

for(var i = 0; i < 10000; i++){

arr[i] = "<div>"+ i + "</div>";

}

document.body.innerHTML += arr.join("");

//效率低的

function func1(){

var divs = document.getElementsByTagName("div");

var start = new Date().getTime();

for(var i = 0; i < divs.length; i++){

//"效率低"

}

var end = new Date().getTime();

alert("用时："+ (end - start) + "毫秒");

}

//效率高的

function func2(){

var divs = document.getElementsByTagName("div");

var start = newDate().getTime();

for(var i = 0, len = divs.length; i < len; i++){

//"效率高"

}

var end = new Date().getTime();

alert("用时："+ (end - start) + "毫秒");

}

IE6.0
函数	第1次	第2次	第3次	第4次	第5次	平均
func1	1416ms	1277ms	1277ms	1370ms	1136ms	1295ms
func2	0ms	0ms	0ms	0ms	0ms	0ms
Firefox4.0
函数	第1次	第2次	第3次	第4次	第5次	平均
func1	2ms	2ms	1ms	1ms	2ms	1ms
func2	1ms	1ms	1ms	2ms	1ms	1ms
Chrome6.0
函数	第1次	第2次	第3次	第4次	第5次	平均
func1	0ms	1ms	0ms	0ms	1ms	0.4ms
func2	0ms	0ms	1ms	1ms	0ms	0.4ms

由上表可以看出，在IE6.0下，其差别是非常明显，而在Firefox和Chrome下几乎没有差别，之所以在IE6.0下会有这种情况，主要是因为for循环在执行中，第一种情况会每次都计算一下长度，而第二种情况却是在开始的时候计算长度，并把其保存到一个变量中，所以其执行效率要高点，所以在我们使用for循环的时候，特别是需要计算长度的情况，我们应该开始将其保存到一个变量中。但是并不是只要是取长度都会出现如此明显的差别，如果我们仅仅是操作一个数组，取得的是一个数组的长度，那么其实两种方式的写法都差不多，我们看下面的例子：

<input type="button" value="效率低" onclick="func1()"/>

<input type="button" value="效率高" onclick="func2()"/>

var arr2 = [];

for(var i = 0; i < 10000; i++){

arr2[i] = "<div>"+ i + "</div>";

}

//效率低的

function func1(){

var start = new Date().getTime();

for(var i = 0; i < arr2.length; i++){

//"效率低"

}

var end = new Date().getTime();

alert("用时："+ (end - start) + "毫秒");

}

//效率高的

function func2(){

var start = new Date().getTime();

for(var i = 0, len = arr2.length; i < len; i++){

//"效率高"

}

var end = new Date().getTime();

alert("用时："+ (end - start) + "毫秒");

}

我们再来看看其在IE6.0下执行情况

IE6.0
函数	第1次	第2次	第3次	第4次	第5次	平均
func1	0ms	0ms	0ms	0ms	0ms	0ms
func2	0ms	0ms	0ms	0ms	0ms	0ms

从上表可以看出，如果仅仅是一个数组的话，我们看到其实两种写法都是差不多的，其实如果我们把循环再上调到100000次的话，也仅仅是差别几毫秒而已，所以在数组的情况下，我认为都是一样的。对于for循环的优化，也有人提出很多点，有人认为用-=1，或者从大到小的方式循环等等，我认为是完全没有必要的，这些优化往往实际情况下根本没有表现出来，换句话说只是计算机级别的微小的变化，但是给我们带来的却是代码的可读性大大的降低，所以实在是得不偿失。

转载于:https://blog.51cto.com/xiaoahei/1221926

如何优化js代码(2)——for循环相关推荐

前端性能优化—js代码打包
现在的 web 应用,内容一般都很丰富,站点需要加载的资源也特别多,尤其要加载很多 js 文件.js 文件从服务端获取,体积大小决定了传输的快慢:浏览器端拿到 js 文件之后,还需要经过解压缩.解析. ...
优化JS代码的34种方法（上）
1. 含有多个条件的if语句 //longhand if(x === 'abc' || x === 'def' || x === 'ghi' || x == 'jkl'){//logic }//sho ...
js代码中for循环里绑定onclick事件报错Uncaught TypeError Cannot set properties of undefined (setting ‘className‘)
jsfor循环里绑定onclick事件报错Uncaught TypeError Cannot set properties of undefined (setting 'className') 我想要 ...
无缝循环滚动图片的JS代码
无缝循环滚动图片的JS代码,用来展示商品什么的最好了,图片URL可以自行替换,速度也可以自己调试. <html> <head> <meta http-equiv=&quo ...
JS代码在线优化工具
最近网上找各种在线优化.美化JS代码的工具,可太难了.不过总算被我找到一个宝藏网站,不仅能 JS代码美化.简化.还能对代码进行加密和解密. 地址直接百度搜:盛迭工具箱而且还是免费使用的,太好了.
java循环购物车结算系统,购物车js代码_JS实现购物车商品列表结算功能代码
最近更新于 4年前 js代码 window.onload = function () { if (!document.getElementsByClassName) { document.getEle ...
【js特效】图片循环滚动代码
1.效果图如下: 2.html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
按需加载图片、html代码、js代码，前端页面性能优化
加载一个比较长的页面,或者图片比较多的页面,如果把资源一次性全部加载,在网络不是很好的情况下可能造成页面留白现象,用户体验极差! 因此呢,我们可以把用户暂时不会看到或用到的资源先不加载,在某个条件下, ...
转:优化js脚本设计，防止浏览器假死
原链接打不开了,复制一份保存: 在Web开发的时候经常会遇到浏览器不响应事件进入假死状态,甚至弹出"脚本运行时间过长"的提示框,如果出现这种情况说明你的脚本已经失控了,必须进行优化 ...

如何优化js代码(2)——for循环

如何优化js代码(2)——for循环相关推荐

最新文章

热门文章