1. 루프 외부에 추가
DOM과 관련된 모든 것에는 대가가 있습니다. DOM에 많은 요소를 추가하는 경우 여러 번 추가하는 대신 한 번에 모두 추가하는 것이 좋습니다. 루프에 요소를 추가할 때 일반적인 문제가 발생합니다.
일반적인 기술은 문서 조각을 사용하는 것입니다. 루프가 반복될 때마다 DOM 요소 대신 조각에 요소를 추가합니다. 루프가 끝나면 조각을 DOM 요소에 추가합니다.
$.each( myArray, function( i, item ) {
var newListItem = document.createElement( "li" );
var itemText = document.createTextNode( item );
newListItem.appendChild( itemText );
frag.appendChild( newListItem );
});
$( "#ballers" )[ 0 ].appendChild( 조각 );
또 다른 간단한 방법은 루프가 반복될 때마다 문자열을 지속적으로 작성하는 것입니다. 루프가 끝나면 DOM 요소의 HTML을 이 문자열로 설정합니다.
$.each( myArray, function( i, item ) {
myHtml = "
});
$( "#ballers" ).html( myHtml );
물론 시도해 볼 수 있는 다른 기술도 있습니다. jsperf라는 사이트는 이러한 속성을 테스트하기 위한 좋은 출구를 제공합니다. 이 사이트를 통해 각 기술을 벤치마킹하고 크로스 플랫폼 성능 결과를 시각화할 수 있습니다.
2. 루프 중 캐시 길이
for 루프에서는 미리 캐시해야 할 때마다 배열의 길이 속성에 액세스하지 마세요.
for ( var i = 0; i < myLength; i ) {
// 작업 수행
}
3. 요소를 분리하여 작업하세요
DOM 조작은 느리기 때문에 가능한 한 정렬을 적게 하는 것이 좋습니다. jQuery는 이 문제를 해결하는 데 도움이 되도록 버전 1.4에서 detach()라는 메서드를 도입했습니다. 이 메서드를 사용하면 DOM에서 요소를 작업할 때 요소를 분리할 수 있습니다.
$table.detach();
// ... 테이블에 수많은 행을 추가하세요
$parent.append( $table );
4. 부재한 요소에 대해 조치를 취하지 마세요
빈 선택기에서 많은 코드를 실행하려는 경우 jQuery는 힌트를 제공하지 않습니다. 오류가 발생하지 않은 것처럼 계속 실행됩니다. 선택기에 포함된 요소 수를 확인하는 것은 사용자의 몫입니다.
// 더 나은 방법:
var $mySelection = $( "#nosuchthing" );
if ( $mySelection.length ) {
$mySelection.slideUp();
}
// 최고: doOnce 플러그인을 추가하세요.
jQuery.fn.doOnce = function( func ) {
this.length && func.apply( this );
이것을 돌려주세요;
}
$( "li.cartitems" ).doOnce(function() {
// 아약스로 만들어 보세요! o/
});
이 가이드는 선택기에 요소가 포함되어 있지 않을 때 많은 오버헤드가 필요한 jQuery UI 위젯에 특히 유용합니다.
5. 최적화 선택기
많은 브라우저가 document.querySelectorAll() 메서드를 구현하고 jQuery가 선택기의 부담을 브라우저로 이전하기 때문에 선택기 최적화는 과거만큼 중요하지 않습니다. 하지만 여전히 명심해야 할 몇 가지 팁이 있습니다.
ID 기반 선택자
항상 ID로 선택기를 시작하는 것이 가장 좋습니다.
.find() 메서드를 사용하면 시끄러운 선택기 엔진을 거치지 않고 첫 번째 선택기가 처리되므로 더 빠릅니다. ID 전용 선택기는 이미 document.getElementById() 메서드를 사용하고 있습니다. 네이티브이기 때문에 처리가 빠릅니다. 브라우저.
구체성
선택기의 오른쪽 부분을 최대한 자세히 설명하고, 왼쪽 부분은 반대로 설명합니다.
선택기의 가장 오른쪽에 있는 선택기를 설명하려면 tag.class 형식을 사용하고, 왼쪽에는 태그 또는 .class만 사용해보세요.
특정성 남용 방지
"DOM"을 사용하면 선택기 엔진이 요소를 검색할 때 많은 반복을 수행할 필요가 없기 때문에 항상 선택기 성능을 향상시키는 데 도움이 됩니다.
범용 선택기 사용을 피하세요
선택기가 정의되지 않은 범위 내에서 명시적으로 또는 암시적으로 일치하는 경우 성능에 큰 영향을 미칩니다.