Heim > Artikel > Web-Frontend > Der Grund, warum jQuerys Each viel langsamer ist als die native for-Schleife von JS

Der Grund, warum jQuerys Each viel langsamer ist als die native for-Schleife von JS

高洛峰Original: 2016-12-29 10:46:511087Durchsuche

Tatsächlich habe ich beim Betrachten des Quellcodes von jQuery festgestellt, dass der Code für jeden sehr einfach ist, aber warum unterscheidet sich die Leistung um Dutzende Male von der nativen for-Schleife?

Der Kerncode von jedem von jQuery

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

Sieht sehr einfach aus, aber warum ist er so viel langsamer?

Schreiben Sie den Testcode wie folgt:

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))); 
}

Führen Sie den Test aus und stellen Sie fest, dass der Unterschied zwischen dem ersten und dem zweiten nicht sehr groß ist, was zeigt, dass nur ein geringer Leistungsunterschied vorliegt Die zweite, dritte und vierte Abweichung sind jedoch mehr als doppelt so hoch, und der einzige Unterschied zwischen der zweiten und der dritten besteht darin, dass der Aufruf zu Leistungseinbußen führt, da der Aufruf den Kontext wechselt Natürlich gibt es noch andere Gründe, warum jQuery langsam ist. Es ruft auch andere Methoden in der Schleife auf, und der Aufruf ist nur ein Grund.

Daher kann man sagen, dass Call und Apply relativ leistungsintensive Methoden in js sind. Wenn die Leistungsanforderungen streng sind, wird empfohlen, sie sparsam zu verwenden.

Schauen wir uns den Leistungsvergleich zwischen jquery's every und js nativer for-Schleife durch einen Codeabschnitt an

<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>

Eingabediskrepanz:

For-Schleifenausführungszeit : 1
Jede Schleifenausführungszeit: 3

Die beiden Ergebnisse veranschaulichen das Problem direkt.

Das oben Genannte ist der Grund, warum jQuery Each viel langsamer ist als die vom Editor eingeführte JS-native for-Schleife. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird allen umgehend antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Weitere verwandte Artikel darüber, warum Each von jQuery viel langsamer ist als die native for-Schleife von JS, finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：AngularJS implementiert eine Drop-Down-Scroll-Lademethode basierend auf ngInfiniteScrollNächster Artikel：AngularJS implementiert eine Drop-Down-Scroll-Lademethode basierend auf ngInfiniteScroll

In Verbindung stehende Artikel

Mehr sehen