Jquery 성능 최적화에 대한 자세한 설명_jquery

검색하고 검색한 끝에 마침내 jquery 성능 최적화에 대한 몇 가지 기사를 발견했습니다. 편집자는 이를 과감하게 수집했으며 물론 제가 직접 요약하고 이해한 내용도 추가하는 것을 잊을 수 없었습니다.

우선, 이전 기사의 jquery 체인 작업은 jquery 성능 최적화 방법 중 하나이며 여기서는 구체적인 구현 및 장점을 반복하지 않습니다. 둘째, jquery 최적화는 웹 최적화의 일부 방법과 동일합니다.

js를 압축합니다. 코드 압축 기술을 사용하여 파일 크기를 줄입니다. (jsmin, YUI 압축기 등 사용)

b. 이벤트는 기본적으로 위쪽으로 버블링됩니다. 하위 노드에서 발생하는 이벤트는 상위 노드에서 처리할 수 있습니다. 이벤트 등록을 상위 노드에 두면 하위 노드마다 이벤트 리스너를 등록할 필요가 없습니다.

c. 캐싱을 사용하면 jquery 객체를 여러 번 사용할 때 jquery 객체를 변수에 캐시할 수 있습니다.

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

var nodeTd = $("table td" );
var $cj = $("#cj");

$cj.on("click",function(){
$cj.css("color","blue");})

jquery 결과 캐시. 프로그램의 다른 곳에서 jquery 결과 개체를 사용해야 하거나 함수가 여러 번 실행되는 경우 이를 변수에 저장할 수 있습니다.

d. ID 선택기에서 상속을 시도합니다. id의 고유성으로 인해 id 선택은 jquery에서 요소를 선택하는 가장 빠른 방법입니다.

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

$("#firstd").slideDown (500) ;
$("#firstd img").slideUp(500);//ID 선택기 상속을 사용하여 여러 요소 선택

하위 쿼리를 사용하세요

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

zhuye.on("swiperright"," #data li ",function(){
                                                                                                                                                    

f. 컨텍스트 검색을 사용하지 않는 find()를 사용하세요. .find() 함수가 더 빠르며 위의 e에서 사용되었습니다.

g. jquery의 내부 함수인 data()를 사용하여 상태를 저장합니다(이 성능 최적화 방법은 Baidu에서 처음 보았으므로 당분간 그의 예를 직접 인용하겠습니다).

코드 복사 코드는 다음과 같습니다.$('#head').data ('name', 'value');

// 그런 다음 애플리케이션에서 호출합니다.

$('#head').data('name');



h. 마지막으로 새로운 버전의 jQuery를 사용하여 jquery 코드를 단순화하세요.

코드 복사 코드는 다음과 같습니다.$(document).ready(function ( ){

});

$(함수 (){
});