Jquery 코드 최적화 노하우를 빠르게 습득하여 페이지 실행 속도를 높입니다.

본고는 가장 많이 보이는 세 가지 측면에서 jquery 최적화를 논의할 것이다.
1. 선택기에서 최적화:
Jquery 선택기의 원리는 사실 js의 선택기(getElementByXXXX) 등을 바탕으로 한다.그래서 우리는 서로 다른 선택기의 선택 속도를 쉽게 알 수 있다.
js처럼 방법이 있습니다. 이런 getElementById, getElementByTagName은 속도가 매우 빠를 것입니다.즉 코드에서 $("#xxx"), $("input") 의 속도가 클래스 선택기 $(".xx") 보다 빠를 것이다.그중 id 선택기의 속도가 가장 빠르다.
클래스 이름이 유일하지 않기 때문에 jquery는 클래스 선택기를 실현할 때dom트리를 훑어보는 방법으로 이루어진다.그래서 유명 선택기의 속도를 짐작할 수 있다.
우리가 코드를 최적화하려면 다음과 같은 몇 가지 측면에서 최적화할 수 있다.
1. id 선택기, tag 선택기를 우선적으로 사용합니다.
2. 클래스 이름 선택기를 사용할 때 다음과 같은 범위를 제공한다.

var selectedItem = $('.listItem', $('.myList'));

이렇게 하면 그는 더 이상 모든dom수 안에서 이런 종류의 원소를 순환해서 찾을 필요가 없다.
3. 코드에 쓰기만 하면 자신의 선택기를 정의할 수 있다.

$.extend($.expr[':'], { over100pixels: function(a) { return $(a).height() > 100; } });

이렇게 하면 네가 정의한 선택기를 사용할 수 있다

 $('.box:over100pixels').click(function() { alert('The element you clicked is over 100 pixels high'); });

4. 코드가 같은 선택기를 중복 사용할 때 변수를 사용하여 대체한다
4

for(var i=0;i<100;i++){
	$(“.sd”).css(“height”,”1px”);
}

으로 변경

var $dom=$(“.sd”);
for(var i=0;i<100;i++){
	$dom.css(“height”,”1px”);
}

효율성이 훨씬 높아질 거예요.
5. 같은 요소의 여러 가지 조작이 있을 때 따로 쓰지 않고 방법으로 연결할 수 있다.

$('#mypanel') .find('TABLE .firstCol') .removeClass('.firstCol') .css('background' : 'red') .append('This cell is now red');

이렇게 하면 여러 문장이 원소를 여러 번 선택하는 것을 피할 수 있다.
6. 항상 최신 jquery 버전을 사용하고 매번 새로운 버전은 선택기의 성능을 최적화시킨다.그래서 새로운 버전의 jquery를 사용하면 코드 성능을 좀 향상시킬 수 있습니다.
2. dom 운영 측면에서 최적화:
우리가 자주 사용하는dom 삽입과 같은 조작append(),.prepend(),.after(),.wrap (), 사용하기에는 상당히 시간이 걸린다.
특히 반복할 때하지만 중복 사용도 자주 한다.우리가 그룹 데이터를 얻었을 때, 항상 페이지에 있는dom를 옮겨다니며,
그러면 이렇게 선택의 여지가 생겼다.
다음을 수행할 수 있습니다.

$.each(response.data,function(index,item){
$(“.aaa”).append(“
”+item+”
”);
});

그러나 위에서 논의한 최적화 수단에 따라 두 가지 최적화를 할 수 있다.
첫 번째 $(".aaa") 선택기는 꺼낼 수 있고, 두 번째 append () 작업은 순환이 끝날 때까지 기다릴 수 있습니다.

var $dom=$(“.aaa”);
var str=””;
$.each(response.data,function(index,item){
str+=“
”+item+”
”;
});
$dom.append(str);

위에도 수조로 문자열을 모을 수 있다.
 
3. 이벤트 귀속 측면에서 최적화:
귀속 이벤트는 더 이상 통용할 수 없는 작업입니다.
주의해야 할 것은 우리가 하나의 종류의 사건을 연결할 때, 같은 종류의 이름의dom가 매우 많을 수 있다는 것이다.하지만 우리가 익숙하게 쓰는 귀속 사건은

$('.kkk ').click(function(){ $(this).css('background', 'red'); });

이런 쓰기 방법은 몇 개의 kkk 클래스 이름의 요소를 몇 개의 이벤트로 연결시킬 수 있습니다.그렇다면 이 경우 어떻게 최적화해야 하는가?

$('#myTable').click(function(e) { var clicked = $(e.target); clicked.css('background', 'red'); });

이렇게 하면 kkk 클래스의dom가 몇 개 있든 한 사건만 연결됩니다.이벤트 에이전트라고 합니다.
 
이러한 우수한 jquery 코드 최적화 방법을 제외하고는 사실 페이지의 마운트 속도를 개선할 수 있는 방법도 많다.좋은 코드 습관을 기르는 것은 우수한 프로그래머의 기본기이다. 한 걸음 한 걸음 우수해야만 더욱 빠르고 안정적으로 갈 수 있다.