jQuery의 Each가 JS의 기본 for 루프보다 훨씬 느린 이유-JS 튜토리얼-php.cn

jQuery의 Each가 JS의 기본 for 루프보다 훨씬 느린 이유

高洛峰

풀어 주다： 2016-12-29 10:46:51

원래의

1082명이 탐색했습니다.

실제로 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))); 
}

로그인 후 복사

테스트를 실행해 보니 첫 번째와 두 번째의 차이가 그리 크지 않은 것으로 보아 성능 차이가 거의 없음을 알 수 있습니다. 그러나 두 번째, 세 번째, 네 번째 편차는 두 배 이상이며 두 번째와 세 번째의 유일한 차이점은 호출이 호출되므로 성능 저하가 발생하는 것 같습니다. 물론 jQuery의 각 메서드가 느린 데에는 다른 이유도 있습니다. 또한 루프에서 다른 메서드를 호출하며 호출은 한 가지 이유일 뿐입니다.

따라서 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

두 결과는 문제를 직접적으로 보여줍니다.

이상은 에디터에서 소개한 JS 네이티브 for 루프 성능보다 jQuery Each가 훨씬 느린 이유입니다. 궁금한 점이 있으면 메시지를 남겨주세요. 그러면 편집자가 모든 사람에게 즉시 답변을 드릴 것입니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

jQuery의 Each가 JS의 기본 for 루프보다 훨씬 느린 이유에 대한 자세한 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!