jQuery 성능 최적화 기법 분석_jquery

이 기사에서는 jQuery 성능 최적화 기술을 더 자세히 분석합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

1. 최신 버전의 jQuery 클래스 라이브러리를 사용하세요

새 버전의 jQuery에는 이전 버전에 비해 버그 수정과 일부 최적화가 포함됩니다. 하지만 버전을 변경한 후에는 코드를 완전히 테스트하는 것을 잊지 마세요. 이전 버전과 호환됩니다.

2. 적절한 선택기를 사용하세요

jQuery 선택기의 최고 성능과 최악 성능은 다음과 같습니다.

$('#id', context)와 같은 ID 선택기
$('p', context)
와 같은 태그 선택기 $('.class', context)
와 같은 클래스 선택기 $('[attribute=value]', context)
와 같은 속성 선택기 $(':hidden', context)

와 같은 의사 클래스 선택기

보충 및 참고사항:

위치 지정 요소의 범위를 좁히려면 선택기에 대한 컨텍스트를 지정해 보세요
ID를 반복적으로 수정하지 마세요. 오류 코드: var $el = $('#list #item1')
ID를 수정하는 태그나 클래스를 피하세요. 오류 코드: var $el = $('ul #item1')
속성 선택기를 사용하는 경우 태그 선택기를 지정하여 액세스 속도를 높이세요. 올바른 코드: var $el = $('a[title="link"]')

3. 캐시 객체

저조한 성과를 내는 방법은 다음과 같습니다.

$('#home').css(...);
$('#home').bind('click', function() {});
$('#home').addClass(...);

참고: jQuery는 각 선택기를 생성하는 과정에서 DOM을 검색하므로 시간과 성능이 소모됩니다.

더 나은 방법:

var $homeLink = $('#home', context);
$homeLink.css(...);
$homeLink.bind('click', function() {});
$homelink.addClass(...);

참고: 동일한 선택기가 코드에 여러 번 표시되지 않도록 하세요.

4. 루프 중 DOM 작업

jQuery를 사용하면 DOM 노드를 쉽게 추가, 삭제, 수정할 수 있지만 for(), while() 또는 $.each()와 같은 일부 루프에서 노드를 처리할 때 아래에 주의할 만한 예가 있습니다. :

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

참고: li 노드를 루프에 100번 추가하면 성능이 많이 소모되므로 DOM 트리에 삽입하기 전에 추가할 모든 노드를 만든 다음 DOM에 추가하는 것이 더 좋습니다. 일단 나무. 더 나은 방법:

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

5. 배열에서 jQuery 객체 사용

jQuery 선택기를 사용하여 jQuery 개체인 결과를 얻습니다. 성능 측면에서는 $.each() 대신 간단한 for 또는 while 루프를 사용하는 것이 좋습니다. 그러면 코드가 더 빨라질 수 있습니다.

참고: 길이를 확인하는 것은 jQuery 객체가 존재하는지 확인하는 방법입니다.

var $list = $('#list');
if($list) {  //总是true
  //do something
}
if($list.length) { //拥有元素才返回true
  //do something
}

6. 이벤트 에이전트

모든 JavaScript 이벤트(예: 클릭, 마우스오버)는 상위 노드까지 버블링됩니다. 이는 여러 요소에서 동일한 함수를 호출해야 할 때 유용합니다.

...
<ul id="list">
  <li id="item1"></li>
  <li id="item2"></li>
  <li id="item3"></li>
  ...
</ul>
...

var $item1 = $('#item1'),
  $item2 = $('#item2'),
  $item3 = $('#item3');
  ...

$item1.click(function() {...});
$item2.click(function() {...});
$item3.click(function() {...});
...

참고: 이런 식으로 100리가 있으면 100개의 이벤트가 바인딩됩니다. 분명히 이는 비과학적이며 많은 성능 손실을 초래합니다.

더 좋은 방법은 li의 상위 노드 ul에 이벤트를 한 번 바인딩한 다음 event.target을 통해 현재 요소를 클릭하는 것입니다.

var $list = $('#list');
$list.click(function(e) {
  var $currentItem = $(e.target);  //e.target捕捉到当前触发事件的目标元素
  ...
});

7. 코드를 jQuery 플러그인으로 변환하세요

매번 비슷한 jQuery 코드를 작성하는 데 시간을 할애한다면 이 유사한 코드를 플러그인으로 전환하는 것을 고려해 보세요. 그러면 코드를 더 재사용할 수 있고 효과적으로 코드를 구성하는 데 도움이 될 수 있습니다.

8. Javascript 배열 Join()을 사용하여 문자열 연결

긴 문자열을 처리할 때 Join() 메서드를 사용하면 성능을 최적화하는 데 도움이 됩니다.

var arr = [];
for(var i = 0; i < 100; i++){
  arr[i] = '<li>' + i + '</li>';
}
$list.html(arr.join(''));

9. HTML5 데이터 속성의 합리적인 사용

HTML5의 데이터 속성은 데이터 삽입, 특히 프런트엔드와 백엔드 간의 데이터 교환에 도움이 될 수 있습니다. jQuery의 data() 메소드는 HTML5 속성을 효과적으로 사용하여 자동으로 데이터를 얻습니다.

...
<a id="info" data-info-index="23" data-role="linkInfo"></a>
...

var $infoLink = $('#info');
var infoIndex = $infoLink.data('info-index');
var type = $infoLink.data('linkInfo');

10. 기본 JavaScript 방법을 사용해 보세요.

예:

$(this).css('color': 'blue');

최적화:

this.style.color = 'blue';

예:

$('<p></p>');

최적화:

$(document.createElement('p'));

11. 자바스크립트 압축

압축 도구를 사용하여 JavaScript 파일을 압축합니다.
프로젝트를 게시할 때 JavaScript 파일의 "축소된" 버전을 사용해야 합니다.

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.