jQuery 개발자가 알아야 할 9가지 실수

jQuery는 사용하기가 너무 쉬워서 때때로 그것이 CSS가 아니라는 사실을 잊어버립니다. CSS를 사용하는 동안에는 성능에 대해 많이 생각할 필요가 없습니다. 왜냐하면 CSS는 너무 빨라서 최적화하려는 노력을 들일 가치가 없기 때문입니다. 그러나 현실 세계에서는 jQuery가 성능 문제로 인해 개발자를 미치게 만들 수 있습니다. 때로는 자신도 모르는 사이에 소중한 밀리초를 잃어버리기도 합니다. 또한 일부 기능을 잊어버리기 쉽고 오래되고 좋지 않은 기능을 계속 사용합니다.

프로젝트에서 jQuery를 사용할 때 가장 일반적이고 해결하기 가장 쉬운 실수 몇 가지를 살펴보겠습니다.

1. 최신 jQuery 버전을 사용하고 있지 않습니다.
각 버전 업데이트는 더 높은 성능과 몇 가지 버그 수정을 의미합니다. 현재 안정적인 릴리스는 1.7.2이며, 1.6 이하 버전을 사용하여 개발된 많은 사이트에 대해 알고 계실 것입니다. 좋아, 좋아, jQuery를 업데이트할 때마다 이전 사이트를 모두 업데이트할 수는 없지만(클라이언트가 그렇게 하도록 비용을 지불하지 않는 한) 최소한 새 프로젝트에 사용하기 시작해야 합니다. 따라서 이 로컬 복사본은 잊어버리고 새 프로젝트를 시작할 때마다 최신 릴리스를 가져오십시오.

2. CDN에서 호스팅하는 jQuery 사본을 사용하고 있지 않습니다.
지난달 순 방문자 수는 몇 명입니까? 그 숫자는 아직 10억 미만일 것 같아요. 그렇죠?
따라서 귀하의 jQuery 대신 Google의 jQuery 사본을 사용하는 것이 좋습니다. 사용자가 여전히 Google 웹사이트(또는 CDN을 사용하는 다른 많은 사이트)의 캐시된 파일을 가지고 있는 경우 해당 브라우저는 캐시된 버전을 가져오므로 웹사이트 성능이 크게 향상됩니다. 다음 HTML을 복사하여 붙여넣어 사용할 수 있습니다:




3. CDN 버전에 대한 대체 버전을 사용하고 있지 않습니다.
Google이 정말 훌륭하다고 말했지만 실패할 수 있습니다. 따라서 외부 소스에 의존할 때마다 로컬 폴백이 있는지 확인하세요. 저는 HTML5 상용구 소스 코드에서 이 조각을 보고 정말 놀랍다고 생각했습니다. 이것도 꼭 써보세요:






4.
일반적인 작업을 수행하는 동안 요소를 조작할 때마다 요소를 호출할 필요가 없습니다. 연속해서 여러 조작을 수행하는 경우 체인을 사용하면 jQuery가 요소를 두 번 가져올 필요가 없습니다.

대신:

$(“#mydiv”).hide();
$(“#mydiv”).css(“왼쪽 패딩”, “50px”);

이것을 사용하세요:

$(“#mydiv”).hide().css(“padding-left”, “50px”);

5. 물건을 캐싱하지 않습니다
이것은 가장 중요한 성능 팁 중 하나입니다. 요소를 두 번 이상 호출하려면 해당 요소를 캐시해야 합니다. 캐싱은 jQuery 선택기를 변수에 저장하는 것이므로 다시 호출해야 할 때 변수를 참조하기만 하면 jQuery는 요소를 찾기 위해 전체 DOM 트리를 다시 검색할 필요가 없습니다.

/* 거의 모든 jQuery 함수가
요소를 반환하므로 이 방법을 사용할 수 있습니다. 따라서 $mydiv는 $(“#mydiv”);와 같습니다.
$mydiv를 사용하면 jQuery 캐싱 var */

var $mydiv = $(“#mydiv”).hide();
[.. 여기서는 멋진 일이 많이 일어나고 있습니다...]
$mydiv.show();

6. 순수 js를 사용하고 있지 않습니다.
특히 속성 수정을 위해 순수 자바스크립트로 작업을 수행할 수 있는 몇 가지 내장 메서드가 있습니다. jQuery 객체를 다시 DOM 노드로 "변환"하여 다음과 같이 더 간단한 방법으로 사용할 수도 있습니다.

$mydiv[0].setAttribute('class', 'awesome'); //$jqObj[0]

7을 사용하여 jQuery 객체를 DOM 노드로 변환할 수 있습니다. 사이트에 포함하기 전에 플러그인을 확인하지 않습니다.
알다시피 jQuery는 세상에서 코딩하기 가장 어려운 것이 아닙니다. 하지만 좋은 JS(및 jQuery)는 꽤 어렵습니다. 나쁜 소식은 당신이 좋은 프로그래머는 아니지만 무엇이 좋고 무엇이 좋지 않은지 알아내기 위해 시행착오에 의존해야 한다는 것입니다. 프로젝트에 플러그인을 포함하는 동안 알아야 할 몇 가지 사항:

파일 크기(가장 확인하기 쉽습니다!) - 툴팁 플러그인이 jQuery 소스보다 크다면 뭔가 정말 잘못된 것입니다.
성능 – Firebug 등을 사용해 시험해 볼 수 있습니다. 이해하기 쉬운 차트를 제공하므로 무언가 잘못되었을 때 알 수 있습니다.
크로스 브라우징 – 최소한 IE7에서는 테스트하세요. 하지만 Chrome, Firefox, Safari, Opera도 시도해 보세요.
모바일 – 모든 것이 모바일화되고 있다는 점을 잊지 마세요. 플러그인이 작동하는지, 아니면 적어도 모바일 브라우저가 충돌하지 않는지 확인하세요.
8. jQuery를 제거할 방법이 없습니다
때로는 jQuery를 제거하고 간단한 CSS를 사용하는 것이 더 나을 때도 있습니다. 예를 들어 실제로 원할 경우 CSS를 사용하고 우수한 브라우저 지원을 통해 불투명도 호버 또는 전환을 수행할 수 있습니다. 그리고 jQuery가 일반 CSS를 이길 수 있는 방법은 없습니다.

9. 서버측 작업에 jQuery를 사용하고 있습니다.
마스킹과 유효성 검사가 좋다는 것은 알지만 이러한 작업을 위해 jQuery에만 의존하지는 마세요. 서버측에서 모든 것을 다시 확인해야 합니다. AJAX 사용을 고려하고 있다면 이는 특히 중요합니다. 또한 JS가 비활성화된 상태에서도 모든 것이 작동하는지 확인하세요.
자, 이제 당신 차례입니다! <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>이 목록에 있어야 한다고 생각하는 것이 있나요? 당신의 생각을 공유하세요!

작가 소개