Jquery 최적화 및 웹 페이지 로딩 속도 향상_jquery
- WBOY원래의
- 2016-05-16 17:15:20972검색
항상 ID 선택기에서 상속
클래스 전에 태그 사용
jquery 객체 캐시
강력한 체인 작업 마스터
하위 쿼리 사용
직접 DOM 작업의 경우 제한
버블링
제거 잘못된 쿼리
$(window).load로 지연
js 압축
jquery 라이브러리에 대한 포괄적인 숙달
1. 항상 ID 선택자에서 상속
jquery에서 가장 빠른 선택기는 Javascript의 getElementById() 메서드에서 직접 제공되기 때문입니다.
코드 복사 코드는 다음과 같습니다.
이런 버튼을 선택하세요 비효율적입니다:
var Traffic_button = $('#content .button')
ID가 있는 버튼을 직접 선택하는 것이 더 효율적입니다.
var Traffic_button = $('#traffic_button');
여러 요소 선택
다중 요소 선택에 대한 언급은 실제로 DOM 순회 및 루핑에 대해 말하는 것으로, 성능 향상을 위해서는 가장 가까운 ID에서 상속하는 것이 가장 좋습니다.
var Traffic_lights = $('#traffic_light input');
2. 수업 전 태그 사용
두 번째로 빠른 선택기는 태그 선택기($('head'))입니다. 마찬가지로 기본 getElementsByTagName() 메서드에서 오기 때문입니다.
코드 코드는 다음과 같습니다.
항상 태그 이름으로 클래스를 제한(수정)합니다(가장 가까운 ID를 잊지 마세요).
var active_light = $('#traffic_light input.on')
참고: 클래스는 jquery에서 가장 느린 선택기입니다. IE 브라우저에서는 사용 위치에 관계없이 모든 DOM 노드를 순회합니다.
태그 이름으로 ID를 수정하지 마세요. 다음 예에서는 모든 div 요소를 탐색하여 ID가 'content'인 노드를 찾습니다.
var content = $('div#content'); ID로 ID를 수정하는 것은 불필요합니다.
var Traffic_light = $('#content #traffic_light');
3. jquery 객체 캐시
jquery 객체를 변수로 캐싱하는 습관을 기르세요.
절대 하지 마세요:
코드 복사 코드는 다음과 같습니다.
$ ('# Traffic_light input.on).bind('click', function(){…});
$('#traffic_light input.on).css('border', '3px dashed yellow');
$ ('#traffic_light input.on).css('ground-color', 'orange');
$('#traffic_light input.on).fadeIn('slow')
객체를 먼저 변수에 캐시한 다음 작동하는 것이 가장 좋습니다.
코드 복사 코드는 다음과 같습니다. 다음은 다음과 같습니다.
var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function(){…});
$ active_light.css('테두리', '3px 점선 노란색');
$active_light.css('Background-color', 'orange');
$active_light.fadeIn('slow')
로컬 변수가 jquery 패키지라는 점을 기억하기 위해 일반적으로 $를 변수 접두사로 사용합니다. 동일한 선택기가 코드에 여러 번 표시되지 않도록 하세요.
나중에 사용하기 위해 jquery 결과 캐시
프로그램의 다른 부분에서 jquery 결과 개체를 사용할 계획이거나 함수가 여러 번 실행될 경우 전역 변수에 캐시하세요.
jquery 결과를 저장할 전역 컨테이너를 정의하면 다른 함수에서 이를 참조할 수 있습니다.
코드 복사 코드는 다음과 같습니다.
// 전역 범위에서 개체를 정의합니다(예: window 개체)
window.$my =
{
// 가능한 모든 쿼리를 초기화합니다. 두 번 이상 사용
head : $('head'),
traffic_light : $('#traffic_light'),
traffic_button : $('#traffic_button')
};
function do_something()
{
// 이제 저장된 결과를 참조하고 조작할 수 있습니다.
var script = document.createElement('script');
$my.head.append(script) ;
/ / 함수 내부에서 작업할 때 쿼리를 전역 개체에 계속 저장할 수 있습니다.
$my.cool_results = $('#some_ul li');
$my.other_results = $('#some_table td');
// 전역 함수를 일반 jquery 객체로 사용합니다.
$my.other_results.css('border-color', 'red');
$my .traffic_light.css('border-color', 'green');
}
4. 강력한 체인 운영을 마스터하세요
위의 예는 다음과 같이 작성할 수도 있습니다.
코드 복사코드는 다음과 같습니다.
var $active_light = $('#traffic_light input.on');$active_light.bind('click', function(){…})
.css('border', '3px 점선 노란색 ')
.css('ground-color', 'orange')
.fadeIn('slow')
이렇게 하면 코드를 덜 작성하고 js를 더 많이 만들 수 있습니다. 가볍습니다.
5. 하위 쿼리 사용
jQuery를 사용하면 래핑된 개체에 대해 추가 선택기 작업을 사용할 수 있습니다. 상위 개체를 변수에 저장했기 때문에 하위 요소에 대한 작업이 크게 향상됩니다.
코드 복사 코드는 다음과 같습니다.
예를 들어 하위 쿼리 방법을 사용하여 켜져 있거나 꺼져 있는 조명을 캡처하고 후속 작업을 위해 이를 캐시할 수 있습니다.
코드 복사 코드는 다음과 같습니다.
var $traffic_light = $('#traffic_light'),
$active_light = $traffic_light.find( 'input. on'),
$inactive_lights = $traffic_light.find('input.off');
팁: 쉼표로 구분된 방법을 사용하여 여러 지역 변수를 한 번에 선언할 수 있습니다. – 바이트 절약
6. 직접적인 DOM 작업을 제한합니다
여기서 기본 아이디어는 실제로 원하는 것을 메모리에 구축한 다음 DOM을 업데이트하는 것입니다. 이는 실제로 jQuery 모범 사례는 아니지만 유효한 JavaScript 조작에 필요합니다.
예를 들어, 목록 요소 집합을 동적으로 생성하려면 다음을 수행하지 마세요.
코드 복사 코드는 다음과 같습니다:
var top_100_list = [...], // 여기에 100개의 고유 문자열이 있다고 가정합니다.
$mylist = $('#mylist') // jQuery는 <를 선택합니다. ; ul> 요소
for (var i=0, l=top_100_list.length; i
$mylist.append('
}
요소 문자열을 DOM에 삽입하기 전에 전체 요소 문자열 세트를 생성해야 합니다.
코드 복사 코드는 다음과 같습니다. 다음:
var top_100_list = [...],
$mylist = $('#mylist'),
top_100_li = "" // 이 변수는 다음 용도로 사용됩니다. 목록 요소 저장
for (var i=0, l=top_100_list.length; i
}
$mylist.html(top_100_li);
삽입하기 전에 여러 요소를 단일 상위 노드에 래핑하면 더 빠릅니다.
코드 복사 코드는 다음과 같습니다.
var top_100_list = [...],
$mylist = $(' #mylist'),
top_100_ul = '
- ';
- top_100_list[i] ' ';
}
top_100_ul = '
for (var i=0, l=top_100_list.length; i
top_100_ul = '
$ mylist.replaceWith(top_100_ul);
위의 작업을 수행했지만 여전히 성능 문제가 걱정된다면 다음을 수행하세요.
jquery의 clone() 메서드를 사용해 보세요. 노드 트리의 복사본이 생성되어 "오프라인" 방식으로 DOM 작업을 수행한 다음 작업이 완료되면 다시 노드 트리에 넣을 수 있습니다. 🎜 >
DOM DocumentFragments를 사용하세요. jQuery 작성자가 말했듯이 DOM을 직접 조작하는 것보다 성능이 훨씬 좋습니다.
7.버블링
특별한 상황을 제외하고 모든 js 이벤트(예: 클릭, 마우스오버 등)는 상위 노드까지 버블링됩니다. 이는 여러 요소에서 동일한 함수를 호출해야 할 때 유용합니다.이 비효율적인 다중 요소 이벤트 수신에 대한 대안은 상위 노드에 한 번만 바인딩하면 이벤트를 트리거한 노드를 계산할 수 있다는 것입니다.
예를 들어, 이 동작을 입력 상자가 많은 양식에 바인딩하려고 합니다. 입력 상자가 선택되면 클래스를 입력 상자에 추가합니다
이와 같은 이벤트 바인딩은 비효율적입니다.
코드 복사 코드는 다음과 같습니다.
$('#entryform 입력).bind('focus', function(){
$(this).addClass('selected');
}).bind('blur', function(){
$(this).removeClass('selected');
})
부모 수준에서 초점을 맞추고 초점을 잃는 이벤트를 들어야 합니다. $(this).addClass('selected');
}).bind('blur', function(){
$(this).removeClass('selected');
})
코드 복사 코드는 다음과 같습니다.
$('#entryform').bind(' focus', function(e) {
var cell = $(e.target); // e.target은 이벤트를 트리거한 노드를 가져옵니다.
cell.addClass('selected');
} ).bind('blur' , function(e){
var cell = $(e.target);
cell.removeClass('selected');
});
상위 요소는 대상 요소를 기반으로 이벤트를 바인딩할 수 있는 디스패처 역할을 합니다. 동일한 이벤트 리스너를 여러 요소에 바인딩했다면 뭔가 잘못된 것입니다.
var cell = $(e.target); // e.target은 이벤트를 트리거한 노드를 가져옵니다.
cell.addClass('selected');
} ).bind('blur' , function(e){
var cell = $(e.target);
cell.removeClass('selected');
});
상위 요소는 대상 요소를 기반으로 이벤트를 바인딩할 수 있는 디스패처 역할을 합니다. 동일한 이벤트 리스너를 여러 요소에 바인딩했다면 뭔가 잘못된 것입니다.
8. 잘못된 쿼리 제거
jquery는 일치하는 요소가 없는 상황을 매우 우아하게 처리할 수 있지만, 전체 사이트에 대해 전역 j가 하나만 있는 경우 모든 jquery 함수가 $( document)ready (function(){//당신이 자랑스러워하는 모든 코드}).
페이지에 사용된 기능만 실행하는 것이 가장 효과적인 방법은 인라인 초기화 기능을 사용하여 템플릿이 js를 실행할 시기와 장소를 정확하게 제어할 수 있도록 하는 것입니다.
예를 들어 '기사' 페이지 템플릿의 본문 끝에 다음 코드를 인용할 수 있습니다.
전역 js 라이브러리는 다음과 같습니다.
var mylib =
{
Article_page :
{
init : function()
{
// 기사별 jQuery 함수.
}
} ,
Traffic_light :
{
init : function()
{
// 신호등 고유의 jQuery 기능입니다.
}
}
}
9. $(window).load로 연기
Jquery는 $(document).ready 아래에 무엇이든 걸어 이벤트인 것처럼 보이게 할 수 있습니다.$(document).rady는 실제로 매우 유용하지만 다른 요소가 다운로드되기 전에 페이지가 렌더링될 때 실행될 수 있습니다. 페이지가 항상 로드되는 경우 아마도 $( document).ready일 것입니다. 기능입니다.
jquery 함수를 $(window).load 이벤트에 바인딩하면 페이지를 로드할 때 CPU 사용량을 줄일 수 있습니다. 이 이벤트는 모든 HTML(