jQuery 성능 최적화를 개선하기 위한 팁-JS 튜토리얼-php.cn

jQuery 성능 최적화를 개선하기 위한 팁

PHPz

풀어 주다： 2018-09-29 14:03:38

원래의

1057명이 탐색했습니다.

이 글은 주로 jQuery 성능 최적화를 향상시키기 위한 심층적인 기술을 소개합니다.

jQuery 성능을 향상하기 위한 다음 최적화 팁을 공유합니다:

캐시 변수

DOM 탐색은 비용이 많이 들므로 재사용을 시도하십시오. 요소 캐싱.

// 糟糕
h = $(&#39;#element&#39;).height();
$(&#39;#element&#39;).css(&#39;height&#39;,h-20);
// 建议
$element = $(&#39;#element&#39;);
h = $element.height();
$element.css(&#39;height&#39;,h-20);

로그인 후 복사

전역 변수 피하기

일반적으로 JavaScript와 마찬가지로 jQuery에서는 변수가 함수 범위 내에 있는지 확인하는 것이 가장 좋습니다.

// 糟糕
$element = $(&#39;#element&#39;);
h = $element.height();
$element.css(&#39;height&#39;,h-20);
// 建议
var $element = $(&#39;#element&#39;);
var h = $element.height();
$element.css(&#39;height&#39;,h-20);

로그인 후 복사

헝가리 명명법을 사용하세요

변수 앞에 $ 접두사를 추가하면 jQuery 개체를 쉽게 식별할 수 있습니다.

// 糟糕
var first = $(&#39;#first&#39;);
var second = $(&#39;#second&#39;);
var value = $first.val();
// 建议 - 在jQuery对象前加$前缀
var $first = $(&#39;#first&#39;);
var $second = $(&#39;#second&#39;),
var value = $first.val();

로그인 후 복사

Var 체인 사용(단일 Var 모드)

여러 var 문을 하나의 문으로 결합하려면 끝에 할당되지 않은 변수를 넣는 것이 좋습니다.

var 
  $first = $(&#39;#first&#39;),
  $second = $(&#39;#second&#39;),
  value = $first.val(),
  k = 3,
  cookiestring = &#39;SOMECOOKIESPLEASE&#39;,
  i,
  j,
  myArray = {};

로그인 후 복사

'On'을 사용해 주세요

jQuery 새 버전에서는 click()과 같은 기능을 대체하기 위해 더 짧은 on("click")을 사용합니다. . 이전 버전에서는 on()이 바인딩()이었습니다. jQuery 버전 1.7부터 on()은 이벤트 핸들러를 연결하는 데 선호되는 방법입니다. 그러나 일관성을 위해 on() 메서드를 모두 함께 사용할 수도 있습니다.

// 糟糕
$first.click(function(){
    $first.css(&#39;border&#39;,&#39;1px solid red&#39;);
    $first.css(&#39;color&#39;,&#39;blue&#39;);
});
$first.hover(function(){
    $first.css(&#39;border&#39;,&#39;1px solid red&#39;);
})
// 建议
$first.on(&#39;click&#39;,function(){
    $first.css(&#39;border&#39;,&#39;1px solid red&#39;);
    $first.css(&#39;color&#39;,&#39;blue&#39;);
})
$first.on(&#39;hover&#39;,function(){
    $first.css(&#39;border&#39;,&#39;1px solid red&#39;);
})

로그인 후 복사

자바스크립트 간소화

일반적으로 가능하면 기능을 결합하는 것이 가장 좋습니다.

// 糟糕
$first.click(function(){
    $first.css(&#39;border&#39;,&#39;1px solid red&#39;);
    $first.css(&#39;color&#39;,&#39;blue&#39;);
});
// 建议
$first.on(&#39;click&#39;,function(){
    $first.css({
        &#39;border&#39;:&#39;1px solid red&#39;,
        &#39;color&#39;:&#39;blue&#39;
    });
});

로그인 후 복사

연쇄 연산

jQuery에서는 메소드의 연쇄 연산을 구현하는 것이 매우 쉽습니다. 아래를 활용해 보세요.

// 糟糕
$second.html(value);
$second.on(&#39;click&#39;,function(){
    alert(&#39;hello everybody&#39;);
});
$second.fadeIn(&#39;slow&#39;);
$second.animate({height:&#39;120px&#39;},500);
// 建议
$second.html(value);
$second.on(&#39;click&#39;,function(){
    alert(&#39;hello everybody&#39;);
}).fadeIn(&#39;slow&#39;).animate({height:&#39;120px&#39;},500);

로그인 후 복사

코드의 가독성을 유지하세요

코드를 간소화하고 체인을 사용하면 코드를 읽기 어렵게 만들 수 있습니다. 핀치와 줄 바꿈을 추가하면 놀라운 효과를 얻을 수 있습니다.

// 糟糕
$second.html(value);
$second.on(&#39;click&#39;,function(){
    alert(&#39;hello everybody&#39;);
}).fadeIn(&#39;slow&#39;).animate({height:&#39;120px&#39;},500);
// 建议
$second.html(value);
$second
    .on(&#39;click&#39;,function(){ alert(&#39;hello everybody&#39;);})
    .fadeIn(&#39;slow&#39;)
    .animate({height:&#39;120px&#39;},500);

로그인 후 복사

단락 평가 선택

단락 평가는 &&(논리 AND) 또는 ||를 사용하여 왼쪽에서 오른쪽으로 평가하는 표현식입니다. (논리 OR) 연산자.

// 糟糕
function initVar($myVar) {
    if(!$myVar) {
        $myVar = $(&#39;#selector&#39;);
    }
}
// 建议
function initVar($myVar) {
    $myVar = $myVar || $(&#39;#selector&#39;);
}

로그인 후 복사

단축키 선택

코드를 간소화하는 한 가지 방법은 코딩 단축키를 활용하는 것입니다.

// 糟糕
if(collection.length > 0){..}
// 建议
if(collection.length){..}

로그인 후 복사

과중한 작업 중 요소 분리

DOM 요소에 대해 많은 작업(여러 속성 또는 CSS 스타일을 연속적으로 설정)을 수행할 계획이라면 다음과 같습니다. 먼저 분리하는 것이 좋습니다. 그런 다음 요소가 추가됩니다.

// 糟糕
var 
    $container = $("#container"),
    $containerLi = $("#container li"),
    $element = null;
$element = $containerLi.first(); 
//... 许多复杂的操作
// better
var 
    $container = $("#container"),
    $containerLi = $container.find("li"),
    $element = null;
$element = $containerLi.first().detach(); 
//... 许多复杂的操作
$container.append($element);

로그인 후 복사

팁 알아두기

jQuery에서 메소드 사용 경험이 부족할 수 있습니다. 문서를 확인하세요. 더 낫거나 더 빠른 문서가 있을 수 있습니다. 그것을 사용하는 방법.

// 糟糕
$(&#39;#id&#39;).data(key,value);
// 建议 (高效)
$.data(&#39;#id&#39;,key,value);

로그인 후 복사

하위 쿼리를 사용하여 상위 요소 캐시

앞서 언급했듯이 DOM 탐색은 비용이 많이 드는 작업입니다. 일반적인 접근 방식은 상위 요소를 캐시하고 하위 요소를 선택할 때 이러한 캐시된 요소를 재사용하는 것입니다.

// 糟糕
var 
    $container = $(&#39;#container&#39;),
    $containerLi = $(&#39;#container li&#39;),
    $containerLiSpan = $(&#39;#container li span&#39;);
// 建议 (高效)
var 
    $container = $(&#39;#container &#39;),
    $containerLi = $container.find(&#39;li&#39;),
    $containerLiSpan= $containerLi.find(&#39;span&#39;);

로그인 후 복사

유니버셜 선택자를 피하세요

유니버설 선택자를 하위 선택자 안에 넣으면 성능이 형편없습니다.

// 糟糕
$(&#39;.container > *&#39;); 
// 建议
$(&#39;.container&#39;).children();

로그인 후 복사

암시적 범용 선택자를 피하세요

범용 선택자는 때때로 암시적이어서 감지하기 어렵습니다.

// 糟糕
$(&#39;.someclass :radio&#39;); 
// 建议
$(&#39;.someclass input:radio&#39;);

로그인 후 복사

최적화 선택기

예를 들어 ID 선택기는 고유해야 하므로 추가 선택기를 추가할 필요가 없습니다.

// 糟糕
$(&#39;p#myid&#39;); 
$(&#39;p#footer a.myLink&#39;);
// 建议
$(&#39;#myid&#39;);
$(&#39;#footer .myLink&#39;);

로그인 후 복사

여러 ID 선택자를 피하세요. 여기서는 ID 선택자가 고유해야 하며 추가 선택자를 추가할 필요가 없으며 여러 하위 ID 선택자가 필요하지 않다는 점을 강조합니다.

// 糟糕
$(&#39;#outer #inner&#39;); 
// 建议
$(&#39;#inner&#39;);

로그인 후 복사

최신 버전을 유지하세요

일반적으로 최신 버전이 더 좋습니다. 더 가볍고 효율적입니다. 당연히 지원하려는 코드의 호환성을 고려해야 합니다. 예를 들어 버전 2.0은 IE 6/7/8을 지원하지 않습니다. 더 이상 사용되지 않는 메서드를 버리세요 새 버전이 나올 때마다 더 이상 사용되지 않는 메서드에 주의를 기울이고 이러한 메서드를 사용하지 않는 것이 매우 중요합니다.

// 糟糕
$(&#39;#outer #inner&#39;); 
// 建议
$(&#39;#inner&#39;);

로그인 후 복사

CDN을 사용하면

Google의 CND는 사용자에게 가장 가까운 캐시를 선택하여 빠르게 응답할 수 있습니다. (구글 CND 이용시 직접 주소를 검색해 주세요. 이곳의 주소는 사용할 수 없습니다. jquery 공식 홈페이지에서 제공하는 CDN을 추천드립니다.)

최종 조언마지막으로 jQuery의 성능 향상과 기타 좋은 제안을 위한 목적으로 이 글을 기록합니다. 이 주제를 더 깊이 탐구하고 싶다면 많은 재미를 발견할 것입니다. jQuery는 필수가 아니라 옵션일 뿐이라는 점을 기억하세요. 왜 그것을 사용하고 싶은지 생각해보십시오. DOM 조작? 아약스? 원판? CSS 애니메이션? 아니면 선택기 엔진인가요? 아마도 자바스크립트 마이크로프레임워크나 사용자 정의된 jQuery 버전이 더 나은 선택일 것입니다.

이상은 jQuery 성능 최적화 개선에 대한 자세한 소개입니다. 더 많은 관련 튜토리얼을 보려면

jQuery 비디오 튜토리얼을 방문하세요.