Heim > Artikel > Web-Frontend > Warum läuft jquery jeweils langsamer als js for-Schleife?

Warum läuft jquery jeweils langsamer als js for-Schleife?

伊谢尔伦Original: 2017-07-19 13:54:022060Durchsuche

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 ein Dutzend Mal 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 es 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 erste und der zweite nicht sehr unterschiedlich sind, was das zeigt Aufgrund einer Unterbrechung ist der durch dieses Urteil verursachte Leistungsunterschied sehr gering, aber die zweite, dritte und vierte Abweichung sind mehr als doppelt so hoch, und der einzige Unterschied zwischen der zweiten und dritten besteht darin, dass der Aufruf aufgerufen wird Verlust, weil der Aufruf den Kontext wechselt. Es gibt natürlich auch andere Gründe, warum jQuery auch andere Methoden in der Schleife aufruft.

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

Schauen wir uns den Leistungsvergleich von 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"> 
<p><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();" /></p> 
<p> 
</form> 
</body> 
</html>

Eingabeunterschied:

für Schleifenausführungszeit: 1
jede Schleifenausführungszeit: 3

Die beiden Ergebnisse veranschaulichen das direkt Problem.

Das obige ist der detaillierte Inhalt vonWarum läuft jquery jeweils langsamer als js for-Schleife?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen 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：Detaillierte Erläuterung der Verwendung von jquery.each und BeispielcodeNächster Artikel：Detaillierte Erläuterung der Verwendung von jquery.each und Beispielcode

In Verbindung stehende Artikel

Mehr sehen