jQuery_jquery의 성능을 향상하는 데 도움이 되는 7가지 작업을 수행하세요.

1. 루프 외부에 추가

DOM과 관련된 모든 것에는 대가가 있습니다. DOM에 많은 요소를 추가하는 경우 여러 번 추가하는 대신 한 번에 모두 추가하는 것이 좋습니다. 루프에 요소를 추가할 때 일반적인 문제가 발생합니다.

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

$.each( myArray, function( i , item ) {
var newListItem = "

" 항목 "

";
$( "#ballers" ).append( newListItem );
});

일반적인 기술은 문서 조각을 사용하는 것입니다. 루프가 반복될 때마다 DOM 요소 대신 조각에 요소를 추가합니다. 루프가 끝나면 조각을 DOM 요소에 추가합니다.

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

var frag = document.createDocumentFragment();

$.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을 이 문자열로 설정합니다.

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

var myHtml = "";

$.each( myArray, function( i, item ) {

myHtml = "

" 항목 "

";

});

$( "#ballers" ).html( myHtml );

물론 시도해 볼 수 있는 다른 기술도 있습니다. jsperf라는 사이트는 이러한 속성을 테스트하기 위한 좋은 출구를 제공합니다. 이 사이트를 통해 각 기술을 벤치마킹하고 크로스 플랫폼 성능 결과를 시각화할 수 있습니다.

2. 루프 중 캐시 길이

for 루프에서는 미리 캐시해야 할 때마다 배열의 길이 속성에 액세스하지 마세요.

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

var myLength = myArray.length;

for ( var i = 0; i < myLength; i ) {

// 작업 수행

}

3. 요소를 분리하여 작업하세요

DOM 조작은 느리기 때문에 가능한 한 정렬을 적게 하는 것이 좋습니다. jQuery는 이 문제를 해결하는 데 도움이 되도록 버전 1.4에서 detach()라는 메서드를 도입했습니다. 이 메서드를 사용하면 DOM에서 요소를 작업할 때 요소를 분리할 수 있습니다.

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

var $table = $( "#myTable " );
var $parent = $table.parent();

$table.detach();

// ... 테이블에 수많은 행을 추가하세요

$parent.append( $table );

4. 부재한 요소에 대해 조치를 취하지 마세요

빈 선택기에서 많은 코드를 실행하려는 경우 jQuery는 힌트를 제공하지 않습니다. 오류가 발생하지 않은 것처럼 계속 실행됩니다. 선택기에 포함된 요소 수를 확인하는 것은 사용자의 몫입니다.

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

// 나쁨: 이전에 세 가지 기능을 실행합니다.
// 선택 항목에 아무것도 없다는 것을 깨닫습니다
$( "#nosuchthing" ).slideUp();

// 더 나은 방법:
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로 선택기를 시작하는 것이 가장 좋습니다.

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

//빠름:
$( "#container div.robotarm" );

// 초고속:
$( "#container" ).find( "div.robotarm" );

.find() 메서드를 사용하면 시끄러운 선택기 엔진을 거치지 않고 첫 번째 선택기가 처리되므로 더 빠릅니다. ID 전용 선택기는 이미 document.getElementById() 메서드를 사용하고 있습니다. 네이티브이기 때문에 처리가 빠릅니다. 브라우저.

구체성

선택기의 오른쪽 부분을 최대한 자세히 설명하고, 왼쪽 부분은 반대로 설명합니다.

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

// 최적화되지 않음:
$( "div.data .gonzalez" );

// 최적화됨:
$( ".data td.gonzalez" );

선택기의 가장 오른쪽에 있는 선택기를 설명하려면 tag.class 형식을 사용하고, 왼쪽에는 태그 또는 .class만 사용해보세요.

특정성 남용 방지

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

$( ".data table.attendees td .gonzalez" );

// 더 나은 방법: 가능하면 중간을 삭제하세요.
$( ".data td.gonzalez" );

"DOM"을 사용하면 선택기 엔진이 요소를 검색할 때 많은 반복을 수행할 필요가 없기 때문에 항상 선택기 성능을 향상시키는 데 도움이 됩니다.

범용 선택기 사용을 피하세요

선택기가 정의되지 않은 범위 내에서 명시적으로 또는 암시적으로 일치하는 경우 성능에 큰 영향을 미칩니다.

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

$( ".buttons > *" ); / / 매우 비쌉니다.
$( ".buttons" ).children(); // 훨씬 좋습니다.

$( ".category :radio" ); 🎜> $ ( ".category *:radio" ); // 이제 명시적입니다.
$( ".category input:radio" ) // 훨씬 더 좋습니다.
다양한 CSS를 변경하려면 스타일시트를 사용하세요. 요소

.css() 메서드를 사용하여 20개 이상의 요소에 대한 CSS를 변경하는 경우 대안으로 페이지에 스타일 태그를 추가하는 것이 좋습니다. 그렇게 하면 속도가 거의 60% 향상될 수 있습니다.

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

// 최대 20개 요소까지 가능합니다. 그 이후에는 천천히 :
$( "a.swedberg" ).css( "color", "#0769ad" );

// 훨씬 빠릅니다:
$( "")
.appendTo( "head" );
jQuery를 블랙박스로 취급하지 마세요

jQuery 소스코드를 문서처럼 즐겨찾기(http://bit.ly/jqsource)에 저장해 두고 자주 참고할 수 있습니다.