jQuery.each ()를 사용해야합니까?

StackOverflow https://stackoverflow.com/questions/1883611

문제

나는 객체의 배열에 대해 매우 빈번한 반복을하고 있으며 jquery.each ()를 사용하고 있습니다. 그러나 속도와 메모리 문제가 있으며 프로파일 러에 따르면 가장 많이 불리는 방법 중 하나는 jQuery.each ()입니다. 길거리의 성능에 대한 단어는 무엇입니까? 루프를 위해 간단한 것으로 전환해야합니까? 물론 나는 내 코드에서도 많은 문제를 해결하고 있습니다.

도움이 되었습니까?

해결책

jQuery의 각 소스 코드는 다음과 같습니다 (John Resig 및 MIT 라이센스 감사합니다) :

each: function( object, callback, args ) {
    var name, i = 0, length = object.length;

    if ( args ) {
        if ( length === undefined ) {
            for ( name in object )
                if ( callback.apply( object[ name ], args ) === false )
                    break;
        } else
            for ( ; i < length; )
                if ( callback.apply( object[ i++ ], args ) === false )
                    break;

    // A special, fast, case for the most common use of each
    } else {
        if ( length === undefined ) {
            for ( name in object )
                if ( callback.call( object[ name ], name, object[ name ] ) === false )
                    break;
        } else
            for ( var value = object[0];
                i < length && callback.call( value, i, value ) !== false; value = object[++i] ){}
    }

    return object;
}

당신이 추적하고 볼 수 있듯이, 대부분의 경우 유일한 오버 헤드가 실제로 콜백 자체 인 루프의 기본을 사용하고 있습니다. 성능에 변화를 가져서는 안됩니다.

편집 : 이것은 선택기 오버 헤드가 이미 발생했으며 인구가 많은 배열이 주어진다는 것을 깨달았습니다. object.

다른 팁

이 기사 (#3) 일부 성능 테스트를 실행했으며 jQuery .Each 기능이 루프의 기본 JavaScript보다 약 10 배 느린 것으로 나타났습니다.

에서 jQuery 성능을 즉시 늘리는 10 가지 방법 -3. 각 대신 사용
사용 개똥 벌레, 두 기능 각각이 실행되는 시간을 측정 할 수 있습니다.

var array = new Array ();
for (var i=0; i<10000; i++) {
    array[i] = 0;
}

console.time('native');
var l = array.length;
for (var i=0;i<l; i++) {
    array[i] = i;
}
console.timeEnd('native');

console.time('jquery');
$.each (array, function (i) {
    array[i] = i;
});
console.timeEnd('jquery');

위의 결과는 기본 코드의 경우 2ms, jQuery의 "각"방법의 경우 2mm입니다. 주면 내 로컬 컴퓨터에서 테스트했는데 실제로는 아무것도하지 않고 (단순한 배열 충전 작업), JQuery의 각 기능은 "루프"의 경우 JS 기본의 10 배 이상이 걸립니다. 이것은 CSS 속성을 설정하거나 다른 DOM 조작 작업과 같이 더 복잡한 물건을 처리 할 때 확실히 증가 할 것입니다.

이 방법은 극적인 속도 개선을 제공해야합니다.

var elements = $('.myLinks').get(), element = null;
for (var i = 0, length = elements.length; i < length; i++) {
    element = elements[i];
    element.title = "My New Title!";
    element.style.color = "red";
}

캐싱은 또한 성능을 향상시킬 것입니다.

function MyLinkCache() {
    var internalCache = $('.myLinks').get();

    this.getCache = function() {
        return internalCache;  
    }

    this.rebuild = function() {
        internalCache = $('.myLinks').get();
    }
}

사용:

var myLinks = new MyLinkCache();

function addMyLink() {
    // Add a new link.
    myLinks.rebuild();
}

function processMyLinks() {
    var elements = myLinks.getCache(), element = null;
    for (var i = 0, length = elements.length; i < length; i++) {
        element = elements[i];
        element.title = "My New Title!";
        element.style.color = "red";
    }
}

jQuery를 최대한 활용하는 한 가지 방법은 반환 된 결과 배열을 무언가를 얻을 필요가있을 때마다 DOM을 다시 트레일하는 대신 변수에 저장하는 것입니다.

하지 말아야 할 일의 예 :

$('.myLinks').each(function(){
    // your code here
});
$('.myLinks').each(function(){
    // some more code here
});

더 나은 연습 :

var myLinks = $('.myLinks');
myLinks.each(function(){
    // your code here
});
myLinks.each(function(){
    // some more code here
});

기본 기능을 사용하면 일반적으로 사용됩니다 더 빠르게 jQuery.each () 메소드와 같은 추상화보다. 그러나 jQuery.each () 메소드는입니다 더 쉬운 사용하려면 코딩이 적습니다.

진실로, 어떤 맥락도없는 사람도 옳고 그른 선택이 아닙니다. 나는 그것이 좋은/Legilble/Clean Code라고 가정 할 때 먼저 더 쉬운 코드를 작성해야한다는 사실을 oppinion입니다. 당신이 묘사하는 것과 같은 상황, 눈에 띄는 지연이있는 상황과 같은 상황에 빠지면 병목 현상이 어디에 있는지 알아 내고 더 빠른 코드를 작성할 때보 다 있습니다.

이 시나리오에서 jQuery.each () 메소드를 대체합니다 ~할 것 같다 그러나 코드를 보지 못했지만 jQuery 방법과 관련이없는 병목 현상이있을 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top