소개
jQuery는 웹 개발 분야에서 가장 널리 사용되는 경량 자바스크립트 라이브러리라고 할 수 있습니다. 전문 웹 개발자뿐만 아니라 많은 신규 웹 개발자나 웹 매니아들도 jQuery를 사용하여 쉽게 자바스크립트에 통합했습니다. .
이 분야를 더 잘하고 싶다면 모범 사례를 배우고 이해해야 합니다. Best Practice는 특정 기술 분야의 발전과 함께 점차 확립되는 최신 기술 및 개발 방법에 대한 정보이며, 웹 개발 분야에서도 매우 유용합니다.
이 기사의 내용은 뛰어난 프론트엔드 엔지니어인 Addy Osmani의 jQuery 성능 TIP 및 Tricks를 참조합니다. 관심이 있으시면 Addy Osmani 자신이 직접 발표한 이 마스터의 연설 PPT도 살펴보실 수 있습니다. jQuery의 핵심 팀(jQuery Core Teams)의 구성원 중 하나입니다.
jQuery 모범 사례를 따라야 하는 이유
웹 개발 분야에서 성능 추구는 결코 멈추지 않을 것입니다. jQuery는 매우 강력한 개발 도구이지만 부적절하게 사용하면 브라우저에 추가 작업과 부담이 가중되고 개발된 웹 애플리케이션이 더 많은 시스템 리소스를 차지하고 실행 속도가 느려지게 됩니다. 그리고 우리 모두는 좋은 웹 애플리케이션이 신선하고 유연해야 한다는 것을 알고 있습니다.
자바스크립트의 성능을 어떻게 판단하나요? 이제 이러한 종류의 성능 테스트는 실행 속도로 요약될 수 있습니다. 간단히 말해서, 동일한 기능에 대해 특정 쓰기 방법이 다른 쓰기 방법보다 빠르게 실행되면 이 쓰기 방법이 더 나은 성능을 얻을 수 있습니다. 물론 이는 성능 관점에서만 고려되며 코드의 유지 관리 가능성은 포함되지 않습니다. 다양한 JavaScript 코드 조각의 성능을 직접 테스트하려면 jsPerf.com을 사용하는 것이 좋습니다. 이 사이트를 사용하면 JavaScript 성능 테스트 사례를 쉽게 만들고 테스트 결과를 저장하고 공유할 수 있습니다. jQuery 팀은 JavaScript 성능 테스트에도 이를 사용합니다.
jQuery 사용 제안
1. 최신 버전을 사용하세요
새 버전의 jQuery에서 제공하는 API는 성능을 향상시키고 일부 기존 버그를 수정합니다. 많은 웹사이트가 jQuery를 사용하고 있기 때문에 jQuery의 새 버전에 대한 변경 사항은 매우 엄격한 테스트를 거치게 되며 업그레이드는 일반적으로 문제를 일으키지 않습니다.
또한 새 버전의 jQuery에서는 API에 매우 유용한 변경 사항을 적용하여 개발 작업을 더 쉽게 만들 수 있습니다. 예를 들어 jQuery 1.7 이전에는 이벤트 바인딩에서 바인딩(), 대리자() 및 live() 메서드를 사용했습니다. 모두 이벤트 바인딩이지만 각 메소드에는 고유한 목적이 있으므로 "언제 어떤 것을 사용해야 하는가?"라는 문제가 발생합니다. jQuery 1.7부터 on(), off() 두 가지 새로운 메소드가 추가되어 모든 이벤트 바인딩 및 제거를 완료하는 것이 권장되므로 이해가 훨씬 쉬워졌습니다.
2. 선택자 이해
jQuery에서는 모든 선택기(Selector)가 동일한 성능을 발휘하는 것은 아닙니다. 즉, 다양한 선택기 작성 방법을 사용하여 특정 요소를 선택할 수 있지만 성능 측면에서도 동일하다고 생각하지 마십시오.
jQuery의 선택기는 가장 빠른 것부터 가장 느린 것까지 다양한 속도로 실행됩니다.
브라우저에서 지원하는 네이티브 DOM 작업 방식(예: document.getElementById())을 사용할 수 있으므로 ID 선택기와 요소 선택기가 가장 빠릅니다. 클래스 선택기가 약간 느린 이유는 IE6-IE8이 기본 getElementsByClassName()을 지원하지 않기 때문이지만 이 기본 메서드를 지원하는 다른 최신 브라우저에서는 클래스 선택기가 여전히 매우 빠릅니다.
가장 느린 의사 클래스와 속성 선택자의 경우 브라우저가 해당 기능에 대해 사용 가능한 기본 메소드를 제공하지 않기 때문입니다. jQuery는 일부 최신 브라우저에서 일부 jQuery 선택기의 성능을 향상시키기 위해 두 가지 기본 선택기 API(CSS 쿼리 API에 속함)인 querySelector() 및 querySelectorAll()을 사용하려고 시도했지만 전반적으로 여전히 상대적으로 느립니다. 물론 이는 jQuery가 의사 클래스 및 속성 선택기에 대한 API 요구 사항이 더 높기 때문이기도 합니다. CSS의 합법적인 선택기인 input[type="text"]를 지원할 뿐만 아니라 필터 요소에 대해 p:first도 지원해야 합니다. 이지만 CSS에서는 잘못된 선택기입니다. 간단히 말해서, jQuery의 의사 클래스와 속성 선택기는 매우 강력하지만 주의해서 사용하세요.
3. 조작하는 요소를 캐시하세요
var parents = $('.parents');
var children = $('.parents').find('.child'); //bad
캐싱은 나중에 다시 호출할 수 있도록 jQuery 선택기의 반환 결과를 저장하는 것을 의미합니다. 각 $('.whatever')는 DOM을 다시 검색하고 jQuery 컬렉션을 반환하므로 재사용이 방지됩니다.
네이티브 JavaScript에서는 데이터나 객체를 캐시하기 위한 로컬 변수를 설정하는 것이 코드를 간소화하고 성능을 최적화하는 데 도움이 됩니다. 여기에도 동일한 원칙이 적용됩니다.
4.체인 구문
var parents = $('.parents').doSomething().doSomethingElse();
jQuery中大部分方法都返回jQuery包装集并支持这种链式语法。javasript的性能优化要点之一是最小化语句数，因此链式语法不仅写起来更容易，运行起来也会更快。
5.使用事件代理
利用事件冒泡，指定一个位于dom较高层级的元素（比如document）的事件处理程序，就可以管理某一类型的所有事件。减少了页面中添加的事件处理程序，自然可以提升整体性能。
6.最小化现场更新
如果你进行操作的DOM部分是已经显示的页面的一部分，那么你就是在进行一个现场更新。现场更新需要浏览器重新计算尺寸，涉及到重绘（repaint）和回流（reflow），有较高的性能花费，因此应减少使用。
在新增内容时，建议先把要新增的代码段合并完全，最后再使用单个append()方法添加到页面。而如果元素存在复杂的交互，比如反复地添加和移除，detach()这个针对性的方法就是最佳的选择。
7.不在不必要的时候使用jQuery方法
$('.nav_link').bind('click', function() {
console.log('nav id: ' + $(this).attr('id')); //bad
$.data(elem, key, value); //significantly faster
};
jQuery方法不一定是最好的方法。这里使用$(this).attr('id')获取当前事件元素的ID，为当前事件元素创建了jQuery包装集，然后调用attr()属性获取方法。但这都是额外的性能花费。事实上，this在事件函数内就表示当前事件元素，直接使用this.id就可以获取元素ID，这种原生DOM属性的写法要更快。
8.适当使用jQuery工具函数
操作jQuery包装集的方法（也就是写在$.fn中的方法），其中一部分也有作为jQuery工具函数（直接写在$中的方法）的同类方法。由于jQuery工具函数在使用中不涉及创建jQuery包装集，因此，在部分情况下，可以通过换用jQuery工具函数提升性能。
比如，在DOM中存储数据，一般的做法是：
$('#elem').data(key, value); //common way
但改为下边的写法会快很多：
需要的注意的是，虽然下面这种方法更快，但作为参数传入的元素不能用选择符，而要用元素本身。
结语
我自己整理和写本文内容时，也感觉很有收获。jQuery是一个很强大的工具，但进一步说，也只提供了web开发的最基本的内容，更高级更复杂的内容，还需要自己不断学习和创作。在这个过程中，遵循最佳实践，养成良好的习惯，会有很大的益处，并逐渐做得更出色！
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
