日本好好热aⅴ|国产99视频精品免费观看|日本成人aV在线|久热香蕉国产在线

<cite id="ikgdy"><table id="ikgdy"></table></cite>

<font id="66116"><td id="66116"><menu id="66116"></menu></td></font>

西西軟件園多重安全檢測(cè)下載網(wǎng)站、值得信賴的軟件下載站！

軟件: 軟件; 文章

搜索

首頁 → 編程開發(fā) → javascript|JQuery → javascript循環(huán)性能大比拼

javascript循環(huán)性能大比拼

相關(guān)軟件相關(guān)文章發(fā)表評(píng)論來源：本站原創(chuàng)時(shí)間：2010/1/29 0:19:41字體大小：A-A+

作者：不詳點(diǎn)擊：929次評(píng)論：1次標(biāo)簽： javascript

1500個(gè)前端開發(fā)常用JavaScript特效

類型：電子教程大�。�3.3M語言：中文評(píng)分：3.6

標(biāo)簽：

立即下載

在設(shè)計(jì)選擇器，我就做了這方面的比較，只不過這次幸運(yùn)遇到另一個(gè)測(cè)試程序，它覆蓋面更廣，測(cè)試類型更全面。最后發(fā)現(xiàn)自己在選擇器中用了一個(gè)很慢的循環(huán)……囧。由于IE性能比較低下，原程序根本無法運(yùn)行，因此我把它移到我的博客上來，漢化一下，并減少大量的測(cè)試個(gè)數(shù)（原程序測(cè)試個(gè)數(shù)為1000，我把IE的測(cè)試個(gè)數(shù)減少為300）。但即使這樣，它還是彈出警告框問你是否中止循環(huán)，你繼續(xù)按否，就能看到結(jié)果了。查看運(yùn)行實(shí)例:http://www.cnblogs.com/rubylouvre/archive/2010/01/29/1658824.html

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>各種循環(huán)比較 by 司徒正美</title>
<style type="text/css">
body{font-family:helvetica,arial,sans-serif;font-size:12px;}
span{display:none;}
table{border-collapse:collapse;margin:10px 0px;}
caption{text-align:left;font-size:18px;font-weight:bold;margin:10px 0px;}
td{padding:10px;border:2px solid #ccc;}
td.bench{color:#c60;font-weight:normal;}
td.code{font-family:"courier new",monospace;}

</style>

<script type="text/javascript">

var chars = '0123456789abcdef';

function getRandomString() {
var len = Math.ceil(Math.random() * 7) + 3; // 4-10
var result = "";
while (len--) {
result += chars.charAt(Math.floor(Math.random() * chars.length));
}
return result;
}

function createDummySpans(howMany) {
for (var i=0; i<howMany; i++) {
var span = document.createElement('span');
span.innerHTML = ' ' + getRandomString() + ' ';
document.body.appendChild(span);
}
}

function esc(str) {
str=str.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
return str;
}

var forEachImp = 'native';
if (!Array.prototype.forEach) {
forEachImp = 'custom';
Array.prototype.forEach = function(fun) {
var len = this.length;
if (typeof fun != "function") { throw new TypeError(); }
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in this) { fun.call(thisp, this[i], i, this); }
}
};
}

function test() {
document.getElementById('h').firstChild.data = 'Testing...';
document.getElementById('h').style.color='#c60';

var size = !+"\v1" ? 300 : 1000;
var mult = 100;

var arr = [];
var lsize = size;
while (lsize--) { arr.push('' + getRandomString() + ''); }

var sarr = [];
var lsize = size;
var which_i = 0;
while (lsize--) {
var skip_ahead = 0;
if (Math.random()> 0.4) {
skip_ahead = Math.ceil(Math.random() * 10);
} else if (Math.random()> 0.2) {
skip_ahead = Math.ceil(Math.random() * 50);
}
which_i += skip_ahead;
sarr[which_i] = '' + getRandomString() + '';
}

createDummySpans(size);
var hColl = document.getElementsByTagName('span');

var start = {};
var end = {};
var comment = {};
var testDesc;
var result = "";

//#########################################

testDesc = "for (var i=0; i<arr.length; i++) { }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
for (var i=0; i<arr.length; i++) { }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = '普通for循環(huán)';

//#########################################

testDesc = "for (var i=0, len=arr.length; i<len; i++) { }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
for (var i=0, len=arr.length; i<len; i++) { }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = 'for循環(huán)，但預(yù)先緩存length屬性';

//#########################################

testDesc = "var i = 0; while (i < arr.length) { i++; }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
var i = 0; while (i < arr.length) { i++; }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = '普通while循環(huán)';

//#########################################

testDesc = "var i = 0, len = arr.length; while (i < len) { i++; }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
var i = 0, len = arr.length; while (i < len) { i++; }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = 'while循環(huán)，但預(yù)先緩存length屬性';

//#########################################

testDesc = "var i = arr.length; while (i--) { }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
var i = arr.length; while (i--) { }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = '倒序while循環(huán)';

//#########################################

testDesc = "var i = arr.length-1; do { } while (i--);";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
var i = arr.length-1; do { } while (i--);
}
end[testDesc] = new Date().getTime();
comment[testDesc] = 'do ... while循環(huán)';

//#########################################

testDesc = "for (var i=arr.length; i--;) { }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
for (var i=arr.length; i--;) { }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = '倒序for循環(huán)';

//#########################################

var popArrs = [];
for (var i=0; i<mult; i++) { popArrs.push(arr.slice()); }
testDesc = "var x; while (x = arr.pop()) { }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
var x; while (x = popArrs[a].pop()) { }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = '通過pop方法驅(qū)動(dòng)while循環(huán)(但可能會(huì)在稀疏數(shù)組中出錯(cuò)).';

//#########################################

testDesc = "for (var i in arr) { }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
for (var i in arr) { }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = 'for...in循環(huán)（但可能會(huì)遍歷更多東西）';

//#########################################

testDesc = "var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/; for (var i in arr) { if(!isInt.test(i)){continue;} }";
start[testDesc] = new Date().getTime();
var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/;
for(var a=0;a<mult;a++) {
for (var i in arr) { if(!isInt.test(i)){continue;} }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = 'for...in循環(huán)并進(jìn)行isInt檢測(cè)';

//#########################################

testDesc = "for (var i=0; arr[i]; i++) { }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
for (var i=0; arr[i]; i++) { }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = 'for循環(huán)，利用元素的自動(dòng)轉(zhuǎn)換進(jìn)行中斷循環(huán)（但如果某個(gè)元素為零……）.';

//#########################################

testDesc = "for (var i=0; arr[i]; i++) { var x = arr[i]; }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
for (var i=0; arr[i]; i++) { var x = arr[i]; }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = '同上，并增加更多檢測(cè)';

//#########################################

testDesc = "for (var i=0, x; x = arr[i++];) { }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
for (var i=0, x; x = arr[i++];) { }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = '同上，合并當(dāng)中兩個(gè)步驟.';

//#########################################

testDesc = "for (var i=0, len=arr.length; < len; i++) { var x = arr[i]; }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
for (var i=0, len=arr.length; i<len; i++) { var x = arr[i]; }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = '普通循環(huán)，并在循環(huán)增加引用';

//#########################################

testDesc = "arr.forEach(function(x){});";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
arr.forEach(function(x){});
}
end[testDesc] = new Date().getTime();
comment[testDesc] = forEachImp+' forEach循環(huán)';

//#########################################

testDesc = "var f=function(x){}; for (var i=0, len=arr.length; i<len; i++) { f(arr[i]); }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
var f=function(x){}; for (var i=0, len=arr.length; i<len; i++) { f(arr[i]); }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = '用for循環(huán)模擬forEach';

//#########################################

result += '<table class="data">';
result += '<caption>原生數(shù)組對(duì)象 (length='+arr.length+', looped '+mult+' times)</caption>';
for (var testDesc in start) {
result += '<tr>';
result += '<td class="comment">'+comment[testDesc]+'</td>';
result += '<td class="code">'+esc(testDesc)+'</td>';
result += '<td class="bench">'+(end[testDesc] - start[testDesc])+'ms</td>';
result += '</tr>';
}
result += '</table>';

var start = {};
var end = {};
var comment = {};

//#########################################

testDesc = "for (var i=0; i<sarr.length; i++) { }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
for (var i=0; i<sarr.length; i++) { }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = '普通for循環(huán)';

//#########################################

testDesc = "for (var i=0, len=sarr.length; i<len; i++) { }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
for (var i=0, len=sarr.length; i<len; i++) { }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = 'for循環(huán)，但預(yù)先緩存length屬性';

//#########################################

testDesc = "var i = 0; while (i < sarr.length) { i++; }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
var i = 0; while (i < sarr.length) { i++; }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = '普通while循環(huán)';

//#########################################

testDesc = "var i = 0, len = sarr.length; while (i < len) { i++; }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
var i = 0, len = sarr.length; while (i < len) { i++; }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = 'while循環(huán)，但預(yù)先緩存length屬性';

//#########################################

testDesc = "var i = sarr.length; while (i--) { }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
var i = sarr.length; while (i--) { }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = '倒序while循環(huán)';

//#########################################

testDesc = "var i = sarr.length-1; do { } while (i--);";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
var i = sarr.length-1; do { } while (i--);
}
end[testDesc] = new Date().getTime();
comment[testDesc] = 'do ... while循環(huán)';

//#########################################

testDesc = "for (var i=sarr.length; i--;) { }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
for (var i=sarr.length; i--;) { }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = '倒序for循環(huán)';

//#########################################

testDesc = "for (var i in sarr) { }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
for (var i in sarr) { }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = 'for...in循環(huán)';

//#########################################

testDesc = "var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/; for (var i in sarr) { if(!isInt.test(i)){continue;} }";
start[testDesc] = new Date().getTime();
var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/;
for(var a=0;a<mult;a++) {
for (var i in sarr) { if(!isInt.test(i)){continue;} }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = 'for...in循環(huán)并進(jìn)行isInt檢測(cè)';

//#########################################

testDesc = "sarr.forEach(function(x){});";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
sarr.forEach(function(x){});
}
end[testDesc] = new Date().getTime();
comment[testDesc] =forEachImp+ 'Array.forEach() ';

//#########################################

testDesc = "var f=function(x){}; for (var i=0, len=sarr.length; i<len; i++) { f(sarr[i]); }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
var f=function(x){}; for (var i=0, len=sarr.length; i<len; i++) { f(sarr[i]); }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = '用for循環(huán)模擬forEach';

//#########################################

result += '<table class="data">';
result += '<caption>稀疏數(shù)組對(duì)象 (length='+sarr.length+', sporadically populated with '+size+' items, looped '+mult+' times)</caption>';
for (var testDesc in start) {
result += '<tr>';
result += '<td class="comment">'+comment[testDesc]+'</td>';
result += '<td class="code">'+esc(testDesc)+'</td>';
result += '<td class="bench">'+(end[testDesc] - start[testDesc])+'ms</td>';
result += '</tr>';
}
result += '</table>';

var start = {};
var end = {};
var comment = {};

//#########################################

testDesc = "for (var i=0; i<hColl.length; i++) { }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
for (var i=0; i<hColl.length; i++) { }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = '普通for循環(huán)';

//#########################################

testDesc = "for (var i=0, len=hColl.length; i<len; i++) { }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
for (var i=0, len=hColl.length; i<len; i++) { }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = 'for循環(huán)，但預(yù)先緩存length屬性';

//#########################################

testDesc = "var i = 0; while (i < hColl.length) { i++; }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
var i = 0; while (i < hColl.length) { i++; }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = '普通while循環(huán)';

//#########################################

testDesc = "var i = 0, len = hColl.length; while (i < len) { i++; }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
var i = 0, len = hColl.length; while (i < len) { i++; }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = 'while循環(huán)，但預(yù)先緩存length屬性';

//#########################################

testDesc = "var i = hColl.length; while (i--) { }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
var i = hColl.length; while (i--) { }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = '倒序while循環(huán)';

//#########################################

testDesc = "var i = hColl.length-1; do { } while (i--);";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
var i = hColl.length-1; do { } while (i--);
}
end[testDesc] = new Date().getTime();
comment[testDesc] = 'do ... while循環(huán)';

//#########################################

testDesc = "for (var i=hColl.length; i--;) { }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
for (var i=hColl.length; i--;) { }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = '倒序for循環(huán)';

//#########################################

testDesc = "for (var i in hColl) { }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
for (var i in hColl) { }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = 'for...in循環(huán)';

//#########################################

testDesc = "var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/; for (var i in hColl) { if(!isInt.test(i)){continue;} }";
start[testDesc] = new Date().getTime();
var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/;
for(var a=0;a<mult;a++) {
for (var i in hColl) { if(!isInt.test(i)){continue;} }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = 'for...in循環(huán)并進(jìn)行isInt檢測(cè)';

//#########################################

testDesc = "for (var i=0; hColl[i]; i++) { }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
for (var i=0; hColl[i]; i++) { }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = 'for循環(huán)，通過自動(dòng)轉(zhuǎn)換元素來中斷循環(huán)';

//#########################################

testDesc = "for (var i=0; hColl[i]; i++) { var x = hColl[i]; }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
for (var i=0; hColl[i]; i++) { var x = hColl[i]; }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = '同上，并在循環(huán)中引用元素';

//#########################################

testDesc = "for (var i=0, x; x = hColl[i++];) { }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
for (var i=0, x; x = hColl[i++];) { }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = '同上，不過是利用引用中斷循環(huán)';

//#########################################

testDesc = "for (var i=0, x; x = hColl.item(i++);) { }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
for (var i=0, x; x = hColl.item(i++);) { }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = '同上，不過是通過item獲取元素然后放到變量';

//#########################################

testDesc = "for (var i=0, len=hColl.length; i<len; i++) { var x = hColl[i]; }";
start[testDesc] = new Date().getTime();
for(var a=0;a<mult;a++) {
for (var i=0, len=hColl.length; i<len; i++) { var x = hColl[i]; }
}
end[testDesc] = new Date().getTime();
comment[testDesc] = 'for循環(huán)，在循環(huán)增加引用元素';

//#########################################

result += '<table class="data">';
result += '<caption>HTML Collection對(duì)象 (length='+hColl.length+', looped '+mult+' times)</caption>';
for (var testDesc in start) {
result += '<tr>';
result += '<td class="comment">'+comment[testDesc]+'</td>';
result += '<td class="code">'+esc(testDesc)+'</td>';
result += '<td class="bench">'+(end[testDesc] - start[testDesc])+'ms</td>';
result += '</tr>';
}
result += '</table>';

document.body.innerHTML += result;

document.getElementById('h').firstChild.data = 'Done Testing.';
document.getElementById('h').style.color='#060';
}

</script>

</head>
<body>

<h1 id="h">javascript循環(huán)測(cè)試程序</h1>

<h2><a href="#" onclick="this.style.display='none';test();return false;">開始測(cè)試</a></h2>

</body>
</html>

運(yùn)行代碼

由上面的實(shí)驗(yàn)我們基本上可得出以下結(jié)論：

while循環(huán)比for循環(huán)快。
倒序循環(huán)比順序循環(huán)快。
緩存length屬性比不緩存快。
請(qǐng)不要用arr[i]來判斷是否中止循環(huán)。
請(qǐng)不要在循環(huán)內(nèi)聲明變量，用它來引用數(shù)組元素，若真的想省幾個(gè)字符，請(qǐng)?jiān)谘h(huán)外聲明。
除非是循環(huán)對(duì)象的屬性，請(qǐng)不要用for...in循環(huán)。
請(qǐng)不要用JavaScript 1.6 的forEach迭代器，特慢！
由于javascript與DOM緊密相連，操作DOM基本上是操作其中的元素節(jié)點(diǎn)，因此我覺得基本上以下幾個(gè)循環(huán)就夠用:

01.//順序
02.for(var i=0,n=arr.length;i<n;i++){}
03.

04.var i = 0, n= arr.length; while (i<n) { i++; }
05.

06.//倒序
07.

08.var i = arr.length; while (i--) { }
09.

10.//遍歷對(duì)象（不要用在數(shù)組上）
11.var val;
12.for(var key in obj){
13.
val = obj[key]
14.}

相關(guān)文章

12-03谷歌瀏覽器如何關(guān)閉javascript 谷歌瀏覽器禁用javascript方法
01-06Aptana Studio 3安裝調(diào)試jquery\javascript
01-06javascript函數(shù)調(diào)用的幾種方法
12-19JavaScript的正則表達(dá)式語法、經(jīng)典 Javascript 正則表達(dá)式
08-24javascript中字符串常用操作總結(jié)、JS字符串操作大全
07-11Visual Studio 2012設(shè)置Jquery/Javascript智能提示
05-15node.js+express安裝配置教程、構(gòu)建JavaScript的Web開發(fā)環(huán)境
04-22Javascript中的“作用域鏈”知識(shí)分享
03-06javascript中函數(shù)語句和表達(dá)式定義函數(shù)的區(qū)別
03-04深入理解JavaScript函數(shù)原型

相關(guān)評(píng)論

閱讀本文后您有什么感想? 已有23人給出評(píng)價(jià)!

8 喜歡

3 頂

1 難過

5 囧

3 圍觀

2 無聊

熱門評(píng)論

最新評(píng)論

發(fā)表評(píng)論查看所有評(píng)論(1)

昵稱:

表情:

字?jǐn)?shù): 0/500 (您的評(píng)論需要經(jīng)過審核才能顯示)

推薦文章

u3d快速入門圖文教程 jQuery選擇器介紹：基本選擇器、層次選擇器、過濾選擇器、表單選擇器

相關(guān)下載

名稱大小下載

最新文章

聯(lián)系我們 | 發(fā)展歷程 | 版權(quán)聲明 | 下載幫助(？) | 廣告服務(wù) | 軟件提交 | 網(wǎng)站地圖 | 意見反饋

聲明：西西軟件園為非贏利性網(wǎng)站不接受任何贊助和廣告鄂ICP備11008782號(hào)-1

<label id="61111"></label>

<ol id="61111"><tr id="61111"><pre id="61111"></pre></tr></ol>

_{<label id="61111"></label>}