JQuery 성능을 향상하여 JQuery를 더 빠르게 실행하는 10가지 빠른 방법_jquery

//다음 예에서는 목록을 생성하고 항목 내용 채우기
//각 항목이 한 번 선택됩니다
//첫 번째 클래스 선택 사용
console.time('class')
var list = $('#list') ;
var items = '
'
for (i=0; iitems = '
항목
'; >items = '
';
list.html (항목)
for (i=0; i<1000; i ) {
var s = $('.item' i);
}
console.timeEnd('class');
//그런 다음 ID를 사용하여
console.time('id')
var list = $('#list' );
var items = '
'
for (i=0; iitems = '
항목
'; 🎜>items = '
';
list.html (items)
for (i=0; ivar s = $('#item' i) ;
}
console.timeEnd('id');


위의 예는 다양한 선택 방법 간의 중요한 성능 차이를 잘 보여줍니다. 아래 그림을 보면 클래스를 사용하여 선택을 하면 시간이 5초를 초과할 정도로 무한히 늘어납니다.
선택기에 대한 컨텍스트 지정
jQuery 참조 문서에 따르면 jQuery()에 전달된 원래 DOM 노드의 컨텍스트입니다(아무 것도 전달되지 않으면 컨텍스트는 전체 문서입니다). 목적은 선택기와 함께 보다 정확한 쿼리를 수행하는 것입니다.

선택기에 컨텍스트를 추가하는 것이 좋습니다(표현식: 대상 선택기; 컨텍스트: 컨텍스트):

즉,

전체 DOM을 탐색할 필요가 없기 때문에 훨씬 빠릅니다. #class-container를 찾으세요.
캐시 구축
같은 것을 계속해서 다시 선택하는 실수를 저지르지 마세요. 처리하려는 요소를 변수로 캐시해야 합니다.

// 이렇게 쓰는 것이 좋습니다
$('#item').css('color', '#123456').html('hello').css('Background- color', '# ffffff');
// 이렇게 해도
var item = $('#item')
item.css('color', '#123456'); >item.html(' hello');
item.css('Background-color', '#ffffff')
// 루프가 발생할 경우 이는 매우 좋지 않습니다.
console.time(' 캐시 없음');
for (var i=0; i$('#list').append(i)
}
console.timeEnd(' 캐시 없음');// 다음이 훨씬 좋습니다
console.time('cache')
var item = $('#list'); ; iitem.append (i)
}
console.timeEnd('cache');
DOM 작업 방지
prepend(),append(),after()와 같은 삽입 작업에는 시간이 많이 걸리므로 DOM 작업은 가능한 한 적어야 합니다. 위의 예는 html()을 사용하면 더 빠릅니다.
이상하게 들릴 수도 있지만 이렇게 하면 실제로 특히 긴 문자열을 연결할 때 속도가 향상됩니다. 먼저 배열을 만들고 연결하려는 항목을 넣습니다. Join() 메서드는 문자열 concat() 함수보다 훨씬 빠릅니다.


var array = []; for (var i=0; i< =10000; i ) { 함수가 실행 후 false를 반환하지 않는 경우, 페이지 상단으로 이동하게 됩니다. 페이지가 길면 이런 반응이 매우 짜증납니다.
그래서



// 여기에 항목

// 여기에
이 제안은 기능 실행 속도는 빠르지만, 기꺼이 시간을 내어 이 치트 시트와 참조 문서를 공부하면 앞으로 많은 시간을 절약할 수 있습니다.
빠른 참조를 위해 항상 치트 시트를 가까이에 보관하세요.