jquery가 각각 js for 루프보다 느리게 실행되는 이유는 무엇입니까?
- 伊谢尔伦원래의
- 2017-07-19 13:54:022060검색
실제로 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='1'>111111</option>
<option value='2'>222222</option>
<option value='3'>333333</option>
<option value='4'>444444</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
</select><input type="button" value="开始比较" onclick="getSelectLength();" /></p>
<p>
</form>
</body>
</html>입력 및 출력:
for 루프 실행 시간: 1
각 루프 실행 시간: 3
두 결과는 문제를 직접적으로 보여줍니다.
위 내용은 jquery가 각각 js for 루프보다 느리게 실행되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.