jQuery の Each が JS のネイティブ for ループよりもはるかに遅い理由-jsチュートリアル-php.cn

jQuery の Each が JS のネイティブ for ループよりもはるかに遅い理由

高洛峰

リリース： 2016-12-29 10:46:51

オリジナル

1121 人が閲覧しました

実際、jQueryのソースコードを見てみると、それぞれのコードはとてもシンプルなのに、ネイティブのforループと比べてパフォーマンスが数十倍も違うのはなぜでしょうか？

各 jQuery

for (; i < length; i++) { 
value = callback.call(obj[i], i, obj[i]); 
if (value === false) { 
break; 
} 
}

ログイン後にコピー

のコアコードは非常に単純に見えますが、なぜこれほど遅いのでしょうか?

次のようにテストコードを書きます:

var length=300000; 
function GetArr() { 
var t = []; 
for (var i = 0; i < length; i++) { 
t[i] = i; 
} 
return t; 
} 
function each1(obj, callback) { 
var i = 0; 
var length = obj.length 
for (; i < length; i++) { 
value = callback(i, obj[i]); 
/* if ( value === false ) {去掉了判断 
break; 
}*/
} 
} 
function each2(obj, callback) { 
var i = 0; 
var length = obj.length 
for (; i < length; i++) { 
value = callback(i, obj[i]);/*去掉了call*/
if (value === false) { 
break; 
} 
} 
} 
function each3(obj, callback) { 
var i = 0; 
var length = obj.length 
for (; i < length; i++) { 
value = callback.call(obj[i], i, obj[i]);/*自己写的call*/
if (value === false) { 
break; 
} 
} 
} 
function Test1() { 
var t = GetArr(); 
var date1 = new Date().getTime(); 
var lengtharr = t.length; 
var total = 0; 
each1(t, function (i, n) { 
total += n; 
}); 
var date12 = new Date().getTime(); 
console.log("1Test" + ((date12 - date1))); 
} 
function Test2() { 
var t = GetArr(); 
var date1 = new Date().getTime(); 
var total = 0; 
each2(t, function (i, n) { 
total += n; 
}); 
var date12 = new Date().getTime(); 
console.log("2Test" + ((date12 - date1))); 
} 
function Test3() { 
var t = GetArr(); 
var date1 = new Date().getTime(); 
var total = 0; 
each3(t, function (i, n) { 
total += n; 
}); 
var date12 = new Date().getTime(); 
console.log("3Test" + ((date12 - date1))); 
} 
function Test4() { 
var t = GetArr(); 
var date1 = new Date().getTime(); 
var total = 0; 
$.each(t, function (i, n) { 
total += n; 
}); 
var date12 = new Date().getTime(); 
console.log("4Test" + ((date12 - date1))); 
}

ログイン後にコピー

テストを実行すると、1回目と2回目の差はあまり大きくなく、ブレーク判定による性能差はほとんどないことがわかりますが、2回目と3回目は、 4 つの偏差は 2 倍以上であり、2 番目と 3 番目の唯一の違いは、呼び出しが呼び出されることでパフォーマンスが低下するようです。呼び出しはコンテキストを切り替えるためです。もちろん、jQuery のそれぞれが遅い理由は他にもあります。ループ内で他のメソッドも呼び出しますが、呼び出しは単なる理由です。

したがって、call と apply は、js の比較的パフォーマンスを消費するメソッドであると言えます。パフォーマンス要件が厳しい場合は、控えめに使用することをお勧めします。

コードの一部を通して、jquery の each ループと js ネイティブの for ループのパフォーマンスを比較してみましょう

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>for与each性能比较</title> 
<script src="../Cks/jquery-1.7.1.min.js" type="text/javascript"></script> 
<script type="text/javascript" language="javascript"> 
function getSelectLength() { 
var time1 = new Date().getTime(); 
var len = $("#select_test").find("option").length; 
var selectObj = $("#select_test"); 
for (var i = 0; i < len; i++) { 
if (selectObj.get(0).options[i].text == "111111") { 
selectObj.get(0).options[i].selected = true; 
break; 
} 
} 
var time2 = new Date().getTime(); 
alert("for循环执行时间：" + (time2 - time1)); 
time1 = new Date().getTime(); 
$("#select_test").find("option").each(function () { 
if ($(this).text() == "111111") { 
$(this)[0].selected = true; 
} 
}); 
time2 = new Date().getTime(); 
alert("each循环执行时间：" + (time2 - time1)); 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div><select id="select_test"> 
<option value=&#39;1&#39;>111111</option> 
<option value=&#39;2&#39;>222222</option> 
<option value=&#39;3&#39;>333333</option> 
<option value=&#39;4&#39;>444444</option> 
<option value=&#39;5&#39;>5</option> 
<option value=&#39;6&#39;>6</option> 
<option value=&#39;7&#39;>7</option> 
<option value=&#39;8&#39;>8</option> 
<option value=&#39;9&#39;>9</option> 
<option value=&#39;10&#39;>10</option> 
<option value=&#39;11&#39;>11</option> 
<option value=&#39;12&#39;>12</option> 
<option value=&#39;13&#39;>13</option> 
<option value=&#39;14&#39;>14</option> 
<option value=&#39;15&#39;>15</option> 
<option value=&#39;16&#39;>16</option> 
<option value=&#39;17&#39;>17</option> 
<option value=&#39;18&#39;>18</option> 
<option value=&#39;19&#39;>19</option> 
<option value=&#39;20&#39;>20</option> 
</select><input type="button" value="开始比较" onclick="getSelectLength();" /></div> 
<div> 
</form> 
</body> 
</html>

ログイン後にコピー

入力と出力:

for ループの実行時間: 1
各ループの実行時間: 3

2 つの結果直接説明された質問です。

上記は、エディターによって導入された jQuery Each が JS ネイティブの for ループのパフォーマンスよりもはるかに遅い理由です。ご質問がある場合は、メッセージを残してください。編集者が対応します。時間内にご返信ください。また、PHP 中国語 Web サイトをサポートしていただきありがとうございます。

jQuery の Each が JS のネイティブ for ループよりもはるかに遅い理由に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。