jquery 성능 최적화에 대한 22가지 제안_jquery
- WBOY원래의
- 2016-05-16 16:46:28997검색
우선 jQuery는 자바스크립트라는 점을 명심하세요. 이는 동일한 코딩 규칙, 스타일 가이드 및 모범 사례를 채택해야 함을 의미합니다.
먼저 자바스크립트 초보자라면 "초보자를 위한 24가지 자바스크립트 모범 사례"를 읽어보시길 권합니다. 이 내용은 jQuery를 시작하기 전에 읽어보는 것이 가장 좋습니다.
jQuery를 사용할 준비가 되면 다음 지침을 따르는 것이 좋습니다.
1. 캐시 변수
DOM 순회에는 비용이 많이 들므로 재사용된 요소를 캐시해 보세요.
//앗
h=$ ('# 요소').height();
$('#element').css('height',h-20);
//제안
$element= $(' #element');
h=$element.height();
$element.css('height',h-20);
2. 전역 변수를 피하세요
jQuery javascript와 마찬가지로 일반적으로 변수가 함수 범위 내에 있는지 확인하는 것이 가장 좋습니다.
//앗
$element= $(' #element');
h=$element.height();
$element.css('height',h-20);
//제안
var $element =$( '#element');
var h=$element.height();
$element.css('height',h-20);
3. 헝가리어 명명법을 사용하세요
변수 앞에 $ 접두사를 추가하면 jQuery 객체를 쉽게 식별할 수 있습니다.
//Oops
var first= $(' #first');
var second=$('#second');
var value=$first.val();
// 제안 - jQuery 객체 앞에 다음을 붙입니다. $
var $first=$('#first');
var $second=$('#second'),
var value=$first.val();
4. var 체인 사용(단일 var 모드)
여러 개의 var 문을 하나의 문으로 결합하려면 할당되지 않은 변수를 끝에 넣는 것이 좋습니다.
var
$first=$( '#first'),
$second=$('#second'),
value=$first.val(),
k=3,
cookiestring='SOMECOOKIESPLEASE',
i,
j,
myArray={};
5. '켜기'를 이용해 주세요
새 버전의 jQuery에서는 더 짧은 on("click")이 click()과 같은 함수를 대체하는 데 사용됩니다. 이전 버전에서는 on()이 바인딩()이었습니다. jQuery 1.7부터 on()은 이벤트 핸들러를 연결하는 데 선호되는 방법입니다. 그러나 일관성을 위해 on() 메서드를 모두 함께 사용할 수도 있습니다.
//앗
$first. click(function (){
$first.css('border','1px solid red');
$first.css('color','blue');
});
$first.hover(function(){
$first.css('border','1px solid red');
})
// 제안
$first. on(' click',function(){
$first.css('border','1px solid red');
$first.css('color','blue');
} )
$first.on('hover',function(){
$first.css('border','1px solid red');
})
6. 자바스크립트를 단순화하세요
일반적으로 가능하면 기능을 결합하는 것이 가장 좋습니다.
//앗
$first. click(function (){
$first.css('border','1px solid red');
$first.css('color','blue');
});
//제안
$first. on(' 클릭',function(){
$first.css({
'테두리':'1px 단색 빨간색',
'color':'blue'
});
}) ;
7. 체인 운영
jQuery에서 메소드 체이닝 작업을 구현하는 것은 매우 쉽습니다. 아래를 활용해 보세요.
//앗
$second. html(value );
$second.on('click',function(){
Alert('안녕하세요 여러분');
});
$second.fadeIn('slow') ;
$second.animate({높이:'120px'},500);
//제안
$second. html(value );
$second.on('click',function(){
Alert('안녕하세요 여러분');
}).fadeIn('slow').animate({높이: '120px' },500);
8. 코드 가독성 유지
코드를 간소화하고 연결을 사용하면 코드를 읽기 어려워질 수 있습니다. 핀치와 줄 바꿈을 추가하면 놀라운 효과를 얻을 수 있습니다.
//앗
$second. html(value );
$second.on('click',function(){
Alert('안녕하세요 여러분');
}).fadeIn('slow').animate({높이: '120px' },500);
//제안
$second. html(value );
$second
.on('click',function(){ Alert('안녕하세요 여러분');})
.fadeIn('slow')
.animate( {높이: '120px'},500);
9. 단락 평가 선택
단락 평가는 &&(논리적 AND) 또는 ||(논리적 OR) 연산자를 사용하여 왼쪽에서 오른쪽으로 평가되는 표현식입니다.
//Oops
function initVar( $myVar) {
if(!$myVar) {
$myVar=$('#selector');
}
}
//제안
function initVar( $myVar) {
$myVar=$myVar || $('#selector');
}
10. 바로가기 선택
코드를 간소화하는 한 가지 방법은 코딩 단축키를 활용하는 것입니다.
[코드]
//앗
if(collection.length > 0){..}
//제안
if(collection .길이) {..}
11. 대규모 작업 시 요소 분리
DOM 요소에 대해 많은 작업(여러 속성 또는 CSS 스타일을 연속적으로 설정)을 수행할 계획이라면 먼저 요소를 분리한 다음 추가하는 것이 좋습니다.
//앗
var
$container=$("#container"),
$containerLi=$("#container li"),
$element=null;
$element=$containerLi.first();
//... 많은 복잡한 작업
//제안
var
$container =$("#container"),
$containerLi=$container.find("li"),
$element=null;
$element=$containerLi.first().detach();
//... 많은 복잡한 작업
$container.append($element);
12. 스킬 암기
jQuery에서 메소드를 사용해 본 경험이 없을 수도 있습니다. 문서를 확인하세요. 더 좋고 더 빠른 사용 방법이 있을 수 있습니다.
//앗
$(' #id' ).data(키,값);
// 제안(효율적)
$.data('#id',키,값);
13. 하위 쿼리를 사용하여 캐시된 상위 요소
앞서 언급했듯이 DOM 순회는 비용이 많이 드는 작업입니다. 일반적인 접근 방식은 상위 요소를 캐시하고 하위 요소를 선택할 때 이러한 캐시된 요소를 재사용하는 것입니다.
//앗
var
$container =$('#container'),
$containerLi=$('#container li'),
$containerLiSpan=$('#container lispan');
// 제안(효율적)
var
$container=$('#container '),
$containerLi=$container.find('li'),
$containerLiSpan= $containerLi.find('span');
14. 범용 선택자를 피하세요
범용 선택자를 하위 선택자에 넣으면 성능이 형편없습니다.
//앗
$(' .컨테이너 > ; *');
//제안
$(' .container' ).children();
15. 암시적 범용 선택자를 피하세요
범용 선택자는 때때로 암시적이어서 찾기가 어렵습니다.
//앗
$(' .someclass: 라디오');
//제안
$(' .someclass 입력 :radio');
16. 최적화 선택기
예를 들어 ID 선택기는 고유해야 하므로 추가 선택기를 추가할 필요가 없습니다.
//앗
$(' div#myid ');
$('div#footer a.myLink');
// 제안
$(' #myid' );
$('#footer .myLink');
17. 여러 ID 선택기를 사용하지 마세요
ID 선택자는 고유해야 하며 추가 선택자를 추가할 필요가 없으며 여러 하위 ID 선택자가 필요하지 않음을 강조합니다.
//앗
$(' #외부 # 내부');
//제안
$(' #내부' );
18. 최신 버전을 유지하세요
일반적으로 새 버전이 더 좋습니다. 즉, 더 가볍고 효율적입니다. 당연히 지원하려는 코드의 호환성을 고려해야 합니다. 예를 들어 버전 2.0은 Internet Explorer 6/7/8을 지원하지 않습니다.
19. 더 이상 사용되지 않는 메소드 포기
새 버전이 나올 때마다 더 이상 사용되지 않는 메서드에 주의를 기울이고 이러한 메서드를 사용하지 않도록 노력하는 것이 매우 중요합니다.
//앗 - 라이브가 포기되었습니다
$( '#stuff').live('click',function() {
console.log('만세');
});
// 제안
$(' #stuff' ).on('click',function() {
console.log('hooray');
});
// 참고: 이는 부적절할 수 있습니다. 실시간이어야 합니다. 실시간 바인딩을 달성할 수 있으며 위임이 더 적합할 수 있습니다
20. CDN 활용
Google의 CND는 사용자에게 가장 가까운 캐시를 선택하고 빠르게 응답하도록 보장합니다. (구글 CND 이용시 직접 주소를 검색해 주세요. 이곳의 주소는 사용할 수 없습니다. jquery 공식 홈페이지에서 제공하는 CDN을 추천드립니다.)
21. 필요한 경우 jQuery와 자바스크립트 네이티브 코드를 결합합니다
위에서 언급했듯이 jQuery는 자바스크립트입니다. 즉, jQuery로 할 수 있는 모든 작업은 네이티브 코드로도 할 수 있습니다. 네이티브 코드(또는 바닐라)는 jQuery보다 읽기 쉽고 유지 관리가 어려울 수 있으며 코드가 더 깁니다. 그러나 이는 또한 더 효율적이라는 것을 의미합니다. 일반적으로 기본 코드에 가까울수록 가독성이 낮을수록 성능이 높아집니다. 예를 들어 조립에는 물론 더 강력한 인력이 필요합니다. 어떠한 프레임워크도 네이티브 코드보다 더 작고, 가벼우며, 더 효율적일 수 없다는 점을 명심하세요(참고: 테스트 링크는 더 이상 유효하지 않습니다. 온라인에서 테스트 코드를 검색할 수 있습니다).
바닐라와 jQuery의 성능 차이를 고려하여 두 가지 모두를 최대한 활용하고 가능하다면 jQuery와 동등한 네이티브 코드를 사용하는 것이 좋습니다.
22. 최종 조언
마지막으로 jQuery의 성능 향상과 기타 좋은 제안을 위한 목적으로 이 글을 기록했습니다. 이 주제를 더 깊이 탐구하고 싶다면 많은 재미를 발견할 것입니다. jQuery는 필수가 아니라 옵션일 뿐이라는 점을 기억하세요. 왜 그것을 사용하고 싶은지 생각해보십시오. DOM 조작? 아약스? 원판? CSS 애니메이션? 아니면 선택기 엔진인가요? 아마도 자바스크립트 마이크로프레임워크나 jQuery의 사용자 정의 버전이 더 나은 선택일 것입니다.