jQuery 프레임워크에서 자주 사용하는 성능 최적화

JQuery는 JavaScript에서 매우 우수한 라이브러리로서 우리가 공부하는 과정에서 반드시 배워야 할 것이다. 비록 그 유행 정도는 그다지 전성기가 되지 않았지만 공부를 하면 다른 구조를 이해하는 데 도움이 된다. 오늘 처음으로 JQuery와 관련된 글을 썼는데 이 성능 문제를 먼저 꺼내자. 왜냐하면 모두가 시간을 jQuery 문법에 사용했기 때문이다.이 프레임워크의 성능 최적화에 대해 잘 몰라요. 다음은 제가 jQuery가 자주 사용하는 성능 최적화를 정리해 드릴게요.
1. 선택기 사용
jQuery는 많은 편리한 선택기 문법을 제공하여 자주 사용하는 몇 가지 및 그것들의 성능 순위를 소개한다

id 선택기 $('#id')는 밑바닥에서document을 직접 사용했기 때문에 최상의 성능임에 틀림없다.getElementById () 따라서 성능을 향상시키면 id가 있는 요소에서 아래로 찾을 수 있으며, 검색 범위를 줄일 수 있습니다. e.g.$('#wrapper').find(‘div’);

탭 선택기 $('tag') 역시 성능이 좋으며, 밑바닥에서document을 직접 호출합니다.getElementByTagName () 은 브라우저 호환성이 좋기 때문에

class 선택기 $('.class') 성능이 id와 탭 선택기가 좋은 이유는 골치 아픈 IE8 및 저버전이 없으면 DOM 검색

에 의존해야 하기 때문이다.

속성 선택기 $('[attribute=value]') 이 현대 브라우저는query Selector All()을 사용하는데, 낡은 것은 DOM 검색을 사용하여 목적을 달성해야 하며, 성능이 좋지 않다

위선기 $(':animated') 우리가 자주 사용하는 위선기는 사실 성능이 좋지 않습니다. jQuery는 모든 요소를 검색해서 위치를 정해야 합니다. 반드시 사용하려면 e.g.$('wrapper')를 줄이는 것이 좋습니다.find/filter(':animated')를 종합하여

가능한 한 ID, 탭 선택기(class 선택기 앞에 탭 선택기를 중첩)

선택기에 상하문을 최대한 지정

2. 캐시 jq 대상
캐시 사상이 성능 향상에 대한 중요성은 말하지 않아도 알 수 있다. 나는 순환문장의 성능 문제용에서도 이런 사상을 언급했다. 너의 코드에 이와 유사한 문법이 있는지 없는지를 보자.

//   
$('#wrapper div.demo').css('background-color','red');
$('#wrapper div.demo').animate('top','100px');
$('#wrapper div.demo').on('click',function(){...});
......

이렇게 하면 줄마다 똑같은 jQuery 대상을 만들고 매번 DOM을 찾아야 하기 때문에 우리는 이렇게 하는 것이 가장 좋다

//   
$demo = $('#wrapper div.demo');
$demo.css('background-color','red');
$demo.animate('top','100px');
$demo.on('click',function(){...});
......

대상을 한 변수에 캐시합니다. 이렇게 하면 DOM을 여러 번 찾지 않고, 여러 번 대상을 만들지 않으며, 보기에 매우 상쾌해 보입니다. 변수 앞에 '$' 기호를 붙이면 jQuery 대상이라는 것을 의미합니다. 일반 변수를 구별하기 위해 다른 함수에서 jQuery 대상을 사용하려면 전역에 캐시할 수 있습니다. 이렇게 하면

window.$my = {
    head: $('#head'),
    content: $('#content'),
    footer: $('#footer'),
    ...
}
function foo(){
    $my.head.css(...);
}

조금만 기억하면 돼요. 코드에 중복된 선택기가 나타나지 마세요.
3. 체인 호출
체인 호출은 jQuery의 특징이라고 할 수 있다. 단순히 함수에서 이 대상을 되돌려주는 것만으로도 하나의 체인 호출 방식을 실현할 수 있다. 나는 특별히 위에 있는 코드에'개선해야 한다'고 표시한 것은 모두가 그것을 마음속에 새길까 봐 걱정했기 때문이다.

$demo = $('#wrapper div.demo');
$demo.css('background-color','red')
     .animate('top','100px')
     .on('click',function(){...});

아니면 앞으로 이 선택기를 쓰지 않는다면, 아예

$('#wrapper div.demo').css('background-color','red')
     .animate('top','100px')
     .on('click',function(){...});

캐시를 하지 않아도 jQuery의 체인 호출을 사용하면 성능을 효과적으로 향상시킬 수 있을 뿐만 아니라 이렇게 하면 더욱 간결하고 우아할 수 있다.
4. DOM 주기 작업
많은 jQuery 방법이 편리하지만 편리함과 동시에 성능 문제를 가져올 수 있으므로 반드시 순환과 DOM 조작을 신중하게 사용하는 것이 성능에 영향을 주는 관건이며 순환 중에 jq 대상을 얻지 않도록 주의해야 한다.

var $list = $('ul.list');
for(var i = 0, i < 100; i++){
    $list.append('<li>' + ... + '</li>');
}

이렇게 하면 매번 교체에 DOM 노드를 직접 삽입하여 성능을 매우 소모할 수 있다.

var $list = $('ul.list');
var temp = '';
for(var i = 0; i < 100; i++){
    temp += '<li>' + ... + '</li>';
}
$list.html(temp);

5. 코드 간소화
코드를 간소화하면 확실히 성능을 향상시킬 수 있다. 예를 들어 이런 코드.

$demo.css('width','100px');
     .css('height','100px');
     .css('color','red');

이렇게 하면 너무 번거로워서 고칠 수 있다.

$demo.css({
    'width': '100px',
    'height': '100px',
    'color': 'red'
});

6. 결합 문자열
join () 을 사용하여 문자열을 연결하는 것이지 '+' 로 성능을 향상시키는 작은 기교가 jQuery에 국한되지 않습니다. 원본 js에서도 주의해야 합니다.

var arr = [];
for(var i = 0; i < 100; i++){ arr[i] = '<div class="demo' + i + '">' }
('.wrapper').html(arr.join());

join () 성능 최적화
7. 원생 js 사용
원생 js를 사용하라고 해서 이 jquery 라이브러리를 사용하는 게 의미가 없다는 건 아니에요. 원생 js를 사용해도 마찬가지로 문제를 간단하게 해결할 수 있다면 원생 js를 사용하세요. 성능을 높일 수 있어요. 그런데 광고문이 떠올랐어요.'독한 술은 좋은데 욕심이 많아요'.each를 for 순환으로 바꾸는 것이 더 좋을 수도 있습니다. 예를 들어 $(this).css('color','red')를this로 변경합니다.style.color ='red'는 아직도 많은데 호환성 문제를 잘 모르면 jQuery가 제공하는 방법을 사용하는 것을 권장합니다. 왜냐하면 이 방면에서 jQuery가 잘 처리하기 때문입니다.
8. 이벤트 위임
자바스크립트의 이벤트는 모두 부모급으로 퍼지기 때문에 l 아래에 1억 개의 리 (불가능하지만) 가 있다면 이벤트를 l 에 연결시켜라. 그리고 이벤트를 촉발하는 원본 대상이 jQuery에 있다고 판단하고, 우리는 on을 사용하여 실현한다.

$('ul').on('click','li',function(){
    ......
});

성능 비교

$('li').on('click',function(){
    .......
});

훨씬 낫다
만약에 정말 1억 개의 리가 있다면, 당신도 이벤트 의뢰/이벤트 에이전트를 사용할 수 밖에 없습니다.
9. 직접 함수
우리는 반드시 밑바닥의 직접 함수를 사용해야 한다. 이 문제는 우리가 사용해야 한다는 것을 잘 이해한다.ajax () 가 아니라.get(), .post () 그들 내부가 호출되었기 때문이다.ajax()
10. 확장 기능
만약 당신의 코드가 여러 번 호출되어야 한다면, 코드를 플러그인 jQuery에서 플러그인을 확장하는 방법은 두 가지가 있습니다.extend () 전역 함수를 봉인하는 플러그인 (사용자 정의 플러그인을 확장할 수 있지만 별로 사용하지 않습니다) $.fn.extend () 대상을 봉인하는 방법의 플러그인
11. 프레임 업데이트
마지막으로 간단합니다. jQuery 버전의 업데이트는 성능을 최적화하고 버그를 복구하거나 증가하는 방법도 삭제할 수 있습니다. 왜냐하면 완전히 호환되지 않는 방법도 삭제할 수 있습니다.
총결산

가능한 ID, 태그 선택기

사용

선택기에 상하문 지정/find 사용()

중복 선택기가 나타나지 않도록 캐시 jq 대상

체인 호출

순환에서 jq 대상을 얻는 것을 피한다

순환 중 DOM 작업 최소화

HTML 구조 수정 최소화

주의 간소화

join() 문자열 사용하기

필요한 경우 기본 자바스크립트

사용

on() 이벤트 의뢰 사용

확장 기능 및 재사용 향상

프레임 업데이트 주의

==홈페이지 전송문 ==