Warum läuft jquery jeweils langsamer als js for-Schleife?-js-Tutorial-php.cn

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

伊谢尔伦

Freigeben： 2017-07-19 13:54:02

Original

2085 Leute haben es durchsucht

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!