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

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

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

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

외부에서 추가 사용
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')
$('

$.fn.data 대신 $.data를 사용하여 $.fn을 직접 호출하는 것보다 DOM 요소에 $.data를 적용합니다. jQuery 선택 결과 .data는 10배 더 빠르지만 DOM 요소와 jQuery 선택 결과 간의 차이점을 이해해야 합니다.

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

// 자주 사용되는
$( elem).data(키, 값);
// 10배 더 빠릅니다.
$.data(elem, key, value)

빈 선택에 시간 낭비 결과는

입니다. jQuery는 실행하려는 코드가 빈 선택에 있는지 알려주지 않고 아무 문제도 없는 것처럼 계속 실행됩니다. 성능에 영향을 미칩니다.

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

//너무 안타깝네요. 세 가지 메소드를 실행한 후에 비어 있음을 깨달았습니다.
$('#nosuchthing').slideUp()

// 더 좋음
var $mySelection = $('#nosuchthing');
if ($mySelection.length) {
mySelection.slideUp()
}

// 최선: doOnce 플러그인 추가
jQuery.fn.doOnce = function(func) {
this.length && func.apply(this)
return this
}
$('li.cartitems').doOnce (function() {
// make it ajax! o/
}); 이 보호 계층은 운영되는 요소가 비어 있더라도 오버헤드가 상당히 높기 때문에 jQuery UI 위젯에 적합합니다.

변수 정의
여러 선언이 아닌 하나의 선언으로 변수 정의 가능

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

// 예전 스타일 쓰기
var test = 1
var test2 = function() {...
};
var test3 = test2(test);

// new
var test = 1,
test2 = function() {...
},
test3 = test2(test); 자동으로 실행되는 함수에서는 변수 정의를 완전히 생략할 수 있습니다. (function(foo, bar) {...
})(1, 2)

조건부 판단

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

// 이전 방법
if (type == 'foo' || type == 'bar') {...
}

// 좋은 방법
if (/^(foo|bar)$/.test(type)) {...
}

// 객체 찾기
if (({
foo: 1,
bar: 1
})[type]) {...
}

저자: Zeng Xiangzhan
출처: 끝없는 배움(http://www.cnblogs.com/zengxiangzhan/)