jquery가 각각 js for 루프보다 느리게 실행되는 이유는 무엇입니까?-JS 튜토리얼-php.cn

jquery가 각각 js for 루프보다 느리게 실행되는 이유는 무엇입니까?

伊谢尔伦

풀어 주다： 2017-07-19 13:54:02

원래의

2082명이 탐색했습니다.

실제로 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차는 세 번째, 네 번째 편차는 두 배 이상이며 두 번째와 세 번째의 유일한 차이점은 호출이 호출된다는 점입니다. 물론 호출이 컨텍스트를 전환하기 때문에 호출이 발생하는 것 같습니다. 다른 이유로 인해 루프에서 다른 메서드도 호출하며 호출은 이유 중 하나일 뿐입니다.

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

로그인 후 복사

입력 및 출력:

for 루프 실행 시간: 1
각 루프 실행 시간: 3

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

위 내용은 jquery가 각각 js for 루프보다 느리게 실행되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!