jquery 성능 향상을 위한 모범 사례 요약

for 루프에서 jquery 개체를 캐시합니다. 매번 배열의 length 속성에 액세스하는 대신 아래와 같이 먼저 개체를 변수에 캐시한 다음 작동해야 합니다.

코드 복사 코드는 다음과 같습니다.

var myLength = myArray.length; >for ( var i = 0; i < myLength; i ) {
// 수행할 작업
}

외부에서 추가 사용
< the loop 🎜>DOM 조작에는 대가가 있습니다. DOM에 많은 수의 요소를 추가해야 하는 경우 한 번에 하나씩 수행하는 대신 일괄적으로 수행해야 합니다.

코드 복사 코드는 다음과 같습니다.

// 하지 마세요

$.each(reallyLongArray , function(count, item) {
var newLI = '

' 항목 '

';
$('#ballers').append(newLI) ;
}) ;
//더 나은 연습
var frag = document.createDocumentFragment()
$.each(reallyLongArray, function(count, item) {
var newLI = '< ;li>' 항목 '';
frag.appendChild(newLI[0])
})
$('#ballers')[0].appendChild(frag) ; 각각을 사용하지 마십시오. ()에서 $('#id') 선택기를 사용하면 DOM 요소를 찾기 위해 여러 번 탐색하게 됩니다. 이는 매우 비효율적입니다. DOM에 대한 변경 횟수와 새로 고침 시간을 줄이려면 document.createDocumentFragment()를 사용하십시오. 페이지 구조

// 또는 다음과 같습니다
var myHtml = ''
$.each(myArray, function(i, item) {
html = '

' 항목 '

'
})
$('#ballers').html(myHtml)

간단하게 유지하세요

코드 복사

코드는 다음과 같습니다. // 적합하지 않음if ( $ventfade.data('현재') != ' 표시 중') {

$ventfade.stop();

}
if ($venthover.data('현재') != '표시 중') {
$venthover.stop();
}
if ($spans.data('현재') != '표시 중') {
$spans.stop()
}
// 더 좋음
var elems = [$ventfade, $ventover, $spans]
$.each(elems, function(k, v) {
if (v.data('현재 ') != '표시') {
v.stop();
}
})



익명 함수 사용 시 주의하세요

익명 함수의 제약은 어디에서나 고통스럽습니다. 디버깅, 유지 관리, 테스트 또는 재사용이 어렵습니다. 대신 객체 캡슐화를 사용하여 이름 지정을 통해 핸들러와 콜백 함수를 구성하고 관리할 수 있습니다.


코드 복사

코드는 다음과 같습니다. // 하지 마세요$(문서).ready(function() {...

$('#magic').click(function(e) {

$('#yayefficents').slideUp(function() { ...
});
})
$('#happiness').load(url ' #unicorns', function() {...
})
} );

// 더 좋음
var PI = {
onReady: function() {...
$('#magic').click(PI.candyMtn)
$(' #happiness').load(url ' #unicorns', PI.unicornCb)
},
candyMtn: function(e) {
$('#yay Effects').slideUp( PI.slideCb) ;
},
slideCb: function() {...
},
unicornCb: function() {...
}
}
$(document) .ready(PI.onReady);



최적화된 선택기

주어진 ID를 기반으로 요소를 일치시키는 노드 선택 및 DOM 작업은 항상 #id를 사용합니다. 요소 찾기


코드 복사

코드는 다음과 같습니다. // 매우 빠릅니다$('# Container div.robotarm');

// 매우 빠릅니다.

$('#container').find('div.robotarm'); 첫 번째 선택 선택기는 선택기 엔진에서 처리할 필요가 없습니다. jquery에서 가장 빠른 선택기는 ID 선택기입니다. 이는 Javascript의 getElementById() 메서드에서 직접 가져오기 때문에 브라우저에 기본으로 제공되므로 매우 빠릅니다. 여러 요소를 선택해야 하는 경우 필연적으로 DOM 순회 및 루핑이 수반됩니다. 성능을 향상하려면 가장 가까운 ID에서 상속하는 것이 좋습니다.


선택기의 오른쪽 부분은 최대한 구체적이어야 하고 왼쪽 부분은 구체적일 필요는 없도록 지정하세요.

코드 복사

코드는 다음과 같습니다. // 최적화되지 않음$( 'div.data .gonzalez');

// 최적화 후

$('.data td.gonzalez'); 가능하다면 선택기 오른쪽에 tag.class를 사용해 보세요. 또는 .class만.


지나치게 구체적이지 마세요

코드 복사 코드는 다음과 같습니다

$('.data table.attendees td.gonzalez');
// 가운데는 쓰지 않는 게 좋을 것 같아요
$('.data td.gonzalez'); DOM 구조는 선택을 개선하는 데도 도움이 됩니다. 선택기의 성능을 통해 선택기 엔진은 해당 요소를 찾기 위해 더 적은 수의 레이어를 실행할 수 있습니다.

방향이 지정되지 않은 와일드카드 선택기 사용을 피하세요

코드 복사 코드는 다음과 같습니다:

$('.buttons > *') // 매우 느림
$('.buttons').children() // 훨씬 빠릅니다
$('.gender :radio'); // 비방향 검색
$('.gender *:radio') // 위와 동일
$('.gender input:radio'); 좋습니다 다수

이벤트 위임 사용

이벤트 위임을 사용하면 이벤트 핸들러를 컨테이너 요소(예: 순서가 지정되지 않은 목록)에 바인딩할 수 있습니다. 컨테이너의 각 요소(예: 목록 항목)를 바인딩해야 합니다. jQuery는 $.fn.live 및 $.fn.delegate를 제공합니다. 가능하다면 $.fn.live 대신 $.fn.delegate를 사용해야 합니다. 불필요한 선택자가 필요하지 않고 명시적 사례($.fn.live의 문서 컨텍스트)의 컨텍스트가 약 80%로 줄어들기 때문입니다. 간접비. 성능상의 이점 외에도 이벤트 위임을 사용하면 이미 존재하는 이벤트를 다시 바인딩할 필요 없이 컨테이너에 새 요소를 추가할 수 있습니다.

이벤트 위임을 통해 여러 이벤트를 한 번에 바인딩하여 이벤트 중복을 줄입니다.

코드 복사 코드는 다음과 같습니다.

// 불량(목록에 요소가 많은 경우)
$('li.trigger').click(handlerFn)

// 더 나은 방법: $.fn.live를 사용한 이벤트 위임
$('li.trigger').live('click', handlerFn)

// 최적: $.fn .delegate
$('#myList').delegate('li.trigger', 'click', handlerFn)

요소 제거
DOM 작업이 느립니다. 그리고 당신은 그것을 작동하지 않도록 노력해야합니다. jQuery는 버전 1.4에서
$.fn.detach를 도입하여 DOM에서 일치하는 모든 요소를 ​​제거했습니다.

코드 복사 코드는 다음과 같습니다.

var $table = $('#myTable ');
var $parent = table.parent();
$table.detach()
// ... 테이블에 많은 수의 행 추가
$parent.append (테이블);

.detach()는 .detach()가 제거된 요소와 관련된 모든 jQuery 데이터를 저장한다는 점을 제외하면 .remove()와 동일합니다. 이 방법은 요소를 제거한 다음 나중에 DOM에 삽입해야 할 때 유용합니다.


많은 요소의 CSS를 수정할 때는 스타일시트를 사용해야 합니다.

$.fn.css를 사용하여 더 많은 요소를 수정하는 경우 요소가 20개 이상인 경우 스타일 태그를 한 번에 추가하면 속도가 60% 증가할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

// 20개 이상은 당연히 느립니다
$ ('a.swedberg').css('color', '#asd123')
$('