JQuery 팁(4) JQuery 성능 향상을 위한 몇 가지 팁_jquery

선택할 때 ID 선택기

로 시작하는 것이 가장 좋습니다. JQuery는 내부적으로 ID 선택을 위해 다른 모든 DOM 선택 방법보다 빠른 document.getElementByID 메서드를 사용하기 때문에 이해하기 쉽다고 생각합니다. 따라서 $("#")로 시작하는 것이 가장 좋습니다. 예:

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

class=" d">

;
$(".b .c .d")//느린 것
$("#a .b .c .d")//빠른 것


$()의 컨텍스트 제공
$()을 사용하여 페이지 요소를 선택할 때 선택 범위를 제공하면 선택 시간을 줄일 수 있습니다. 물론 전체 페이지 대신 페이지가 필터링 시간을 단축합니다. 이는 $() 함수 내에서 두 번째 매개변수를 컨텍스트로 제공하여 달성할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

hi

🎜>
물론, jquery 정의(또는 js 함수) 이벤트 내에서 이를 사용하여 컨텍스트를 참조할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

hi

>

$("#test").click(function() {

var text = $(".inner" , this).text(); //이것은 $( "#test")

alert(text);//alert hi
}); >
물론 위의 예는 다음과 같은 두 가지 방법으로 작성할 수도 있습니다.




코드 복사


코드는 다음과 같습니다. 다음:

안녕하세요

find 방법을 사용하는 것이 모든 방법 중에서 가장 효율적입니다. 🎜>

물론 id 선택기, 즉 $(" #..")를 사용하여 선택하면 컨텍스트 매개변수를 제공할 필요가 없습니다. 이는 속도에 영향을 주지 않습니다

저장 자주 사용되는 JQuery 래핑 요소
제목에서 알 수 있듯이 $( )페이지 요소를 선택하는 데 시간이 걸리므로 다음과 같이 변수로 저장하면 이러한 낭비를 피할 수 있습니다.




코드 복사

코드는 다음과 같습니다.

• one
> ;

• 2
4
🎜> for ( i = 0; i alert($li[i].innerHTML); //여기서도 마찬가지입니다.
}



코드에서 볼 수 있듯이 여러 항목을 피합니다. 반복 선택은 성능을 향상시킬 수 있습니다:-)



선택기를 최대한 적게 사용하세요.
JQuery의 선택기는 배열 지향적이므로 다음과 같이 조건이 허용하는 경우 선택기를 최대한 적게 사용하세요.




코드 복사


코드는 다음과 같습니다.










보시다시피 선택기를 사용하여 선택한 요소를 쉼표로 구분하고 여러 요소를 선택하면 코드가 더욱 간결해질 뿐만 아니라 , 하지만 생성되는 JQuery 인스턴스 수를 줄이면 성능이 약간 향상됩니다!



루프가 많을 때는 $().each 사용을 피하고 for 루프를 사용하세요
$ 사용 루프를 수행할 때 ().each 메서드를 사용하면 $().each를 사용할 때 적은 수의 루프가 성능에 미치는 영향은 미미하지만, 수가 클 경우 성능에 미치는 영향은 상당합니다.

정보를 확인해 보니 숫자가 1000 미만이면 $().each 메서드를 사용할 수 있다고 합니다. 사용해야합니다.



DOM 작업을 최대한 최소화하세요.
페이지의 DOM 작업은 상대적으로 비용이 많이 들기 때문에(예: 페이지에 텍스트 삽입 또는 삭제) 이러한 변화를 최소화하는 것이 성능을 위한 가장 중요한 일입니다. 예:

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








첫 번째 예는 DOM에 100번 수정된 영향을 주지 않는 반면 두 번째 예는 DOM을 한 번만 수정했습니다. 성능 차이가 분명합니다.



JQuery 애니메이션 효과를 차단할 수 있습니다
경우에 따라 JQuery 애니메이션을 끌 수 있으면 성능을 향상시킬 수 있습니다.


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



JS 객체가 될 수 있는 경우 JQuery에 매우 적합한
객체를 사용해 보세요. 플러그인 또는 JQuery의 CSS 및 attr 메서드를 사용하여 키/값 또는 js 키/값 개체 쌍을 매개변수로 허용하면 다음과 같은 JQuery 개체 생성을 줄일 수 있습니다.

코드 복사

코드는 다음과 같습니다.
text/javascript"> $("div").css ("display", "block"); $("div").css("Background-color", "blue")
//느립니다. 더 많은 Jquery 객체를 생성하기 때문입니다

$("div").css({ "display": "block", "ground-color": "blue" })
//빠르게, 하나의 객체만 생성


물론 연결 방법을 사용할 수도 있습니다:




코드 복사


코드는 다음과 같습니다.
$("div").css("display", "block"). css("Background-color", "blue");

그러나 이 방법은 위의 방법보다 성능이 좋지 않습니다. 두 가지 방법을 사용해야 하며, 더 많은 임시 객체를 생성해야 합니다.

위의 몇 가지 팁은 다음과 같습니다. JQuery 성능 향상