고품질 jQuery 코드 작성 방법(jquery를 사용한 성능 문제)_jquery
- WBOY원래의
- 2016-05-16 16:42:561287검색
1. jQuery를 올바르게 인용하세요
1. Head가 아닌 Body가 끝나기 전에 jQuery를 도입해보세요.
2. jQuery를 도입하려면 타사에서 제공하는 CDN을 사용하세요. 동시에 타사 CDN을 사용할 때 문제가 발생할 경우 로컬 jQuery 파일을 도입하도록 주의하세요. (이미 CDN을 사용하고 있는 웹사이트에서는 무시할 수 있습니다. 이제 사용자 대역폭이 업그레이드되었으므로 무시할 수 있습니다. 다른 사람의 컴퓨터에 설치하면 안정적이지 않을 수 있습니다.)
3. 36cc49f0c466276486e50c850b7e4956 이전에 스크립트 파일이 도입되면 js 코드 실행 시 DOM이 이미 로드되어 있으므로 document.ready를 작성할 필요가 없습니다.
<body>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery1.8.min.js">\x3C/script>')</script>
</body>
2. jQuery 선택기 최적화
jQuery 선택자를 효율적이고 올바르게 사용하는 것은 jQuery를 능숙하게 사용하기 위한 기본입니다. jQuery 선택자를 익히려면 jQuery를 배울 때 선택자 사용에 주의를 기울여야 합니다.
<div id="nav" class="nav"> <a class="home" href="http://www.jb51.net">脚本之家</a> <a class="articles" href="http://www.jb51.net/list/list_172_1.htm">jQuery教程</a> </div>
클래스가 home인 요소를 선택하면 다음 코드를 사용할 수 있습니다.
$('.home'); //1
$('#nav a.home'); //2
$('#nav').find('a.home'); //3
1. 방법 1은 jQuery가 전체 DOM에서 home 클래스가 있는 a 요소를 검색하도록 하며 성능을 상상할 수 있습니다.
2. 방법 2에서는 검색할 요소에 컨텍스트를 추가합니다. 여기서는 nav라는 id를 가진 하위 요소를 검색하도록 변경되어 검색 성능이 크게 향상되었습니다.
3. 방법 3은 find 방법을 사용하는 것이 더 빠르므로 방법 3이 가장 좋습니다.
jQuery 선택자의 성능 우선순위는 ID 선택자가 요소 선택자보다 빠르고, 요소 선택자가 클래스 선택자보다 빠릅니다. ID 선택기와 요소 선택기는 기본 JavaScript 작업이지만 클래스 선택기는 그렇지 않기 때문에 find 컨텍스트와 find() 하위 간의 차이점을 살펴볼 수 있습니다.
3. jQuery 객체 캐싱
jQuery 객체를 캐싱하면 불필요한 DOM 검색을 줄일 수 있습니다. 이 점에 관해서는 성능 향상을 위해 jQuery 객체 캐싱을 참고할 수 있습니다.
4. 이벤트 위임의 올바른 사용
이벤트 위임을 사용하면 이벤트가 더 잘 실행될 수 있습니다. 동적으로 추가된 요소에 이벤트를 바인딩하려면 on을 사용하여 하나 이상의 이벤트 처리를 요소 함수에 바인딩하는 것이 좋습니다.
<table id="t"> <tr> <td>我是单元格</td> </tr> </table>
예를 들어 클릭 이벤트를 위쪽 셀에 바인딩하려는 경우 일반 친구는 다음과 같이 작성할 수 있습니다.
$('#t').find('td').on('click', function () {
$(this).css({ 'color': 'red', 'background': 'yellow' });
});
이것은 이벤트를 각 td에 바인딩합니다. 클릭 이벤트를 100개 셀에 바인딩하는 테스트에서 둘 사이의 성능 차이는 다음과 같이 작성하는 것이 좋습니다.
$('#t').on('click', 'td', function () {
$(this).css({ 'color': 'red', 'background': 'yellow' });
});
5. jQuery 코드 간소화
예를 들어 위 코드에서는 jQuery 코드와 유사하게 .attr() 메소드 등을 적절하게 병합했지만 다음과 같은 방식으로 작성하지는 않았습니다.
$('#t').on('click', 'td', function () {
$(this).css('color', 'red').css('background', 'yellow');
});
6. DOM 작업 줄이기
jQuery를 처음 사용하게 되면 DOM을 자주 조작하게 되는데, 이는 상당한 성능 소모를 가져온다. 본문에 테이블을 동적으로 출력하고 싶다면 몇몇 친구들은 다음과 같이 쓸 것입니다:
var $t = $('body');
$t.append('<table>');
$t.append('<tr><td>1</td></tr>');
$t.append('</table>');
우수 사례:
$('body').append('<table><tr><td>1</td></tr></table>');
이런 식으로 테이블 문자열을 이어붙인 후 바디에 추가한 후 DOM 작업은 한 번만 하면 됩니다. 이 때문에 그룹의 친구가 IE에서 출력할 때 문제가 발생했습니다. 문자열 접합에 관해서는 문자열을 생성하는 가장 빠른 방법을 참조할 수 있습니다.
7. jQuery를 사용하지 마세요
네이티브 함수는 항상 가장 빠릅니다. 코드를 작성할 때 네이티브 JS를 잊어서는 안 됩니다.
먼저 이러한 제안을 요약해 보겠습니다. 각 제안은 이해하기 어렵지 않지만, 종합적으로 요약하려면 여전히 많은 시간이 걸립니다. 예를 들어 축소된 코드 세그먼트에서 조건에 따라 배열에서 새 배열을 가져와야 하는 경우 jQuery를 사용할 때 자신만의 팁이 있다면 $.grep() 메서드를 사용할 수 있습니다. , 댓글을 남겨주세요.
다음은 다른 네티즌들이 추가한 내용입니다.
jQuery 변수 정의 시 var 키워드 추가에 주의하세요
이는 jQuery뿐만 아니라 모든 자바스크립트 개발 과정에서 주의가 필요한 부분입니다. 다음과 같이 정의하지 마세요.
$loading = $('#loading'); //이것은 전역 정의입니다. 실수로 어딘가에서 동일한 변수 이름을 참조하면 우울해집니다.
변수를 정의하려면 var를 사용하세요
여러 변수를 사용하는 경우 다음과 같이 정의해주세요.
var 페이지 = 0,
$로딩 = $('#로딩'),
$body = $('body');
심각한 강박 장애가 없는 한 모든 변수에 var 키워드를 추가하지 마세요
jQuery 변수 정의
변수를 선언하거나 정의할 때 jQuery 변수를 정의하는 경우 다음과 같이 변수 앞에 $ 기호를 추가하십시오.
var$loading = $('#loading');
이렇게 정의하면 자신이나 코드를 읽는 다른 사용자에게 이것이 jQuery 변수임을 효과적으로 상기시킬 수 있다는 장점이 있습니다.
DOM 운영시 캐시를 꼭 기억해주세요
jQuery 코드 개발에서는 DOM을 조작해야 하는 경우가 많습니다. DOM 조작은 리소스를 많이 소모하는 프로세스이므로 많은 사람들이 다음과 같이 jQuery를 사용하는 것을 좋아합니다.
$('#loading').html('완료');
$('#loading').fadeOut();
코드에는 아무런 문제가 없으며 정상적으로 실행하여 결과를 얻을 수 있지만 $('#loading')을 정의하고 호출할 때마다 실제로 필요한 경우 새 변수가 생성된다는 점에 유의하세요. 이를 다시 사용하려면 변수 내용을 효과적으로 캐시할 수 있도록 다음과 같이 변수에 정의해야 합니다.
var $loading = $('#loading');
$loading.html('완료');$loading.fadeOut();
이렇게 하면 성능이 더 좋아질 거예요.
체인 작업 사용
위의 예를 더 간결하게 작성할 수 있습니다.
var $loading = $('#loading');
$loading.html('완료').fadeOut();
jQuery 코드 간소화
일부 코드를 함께 통합해 보세요. 다음과 같이 코딩하지 마세요.
//! ! 악당 $button.click(function(){
$target.css('너비','50%');
$target.css('테두리','1px solid #202020');
$target.css('color','#fff');
});
은 다음과 같이 작성해야 합니다.
$button.click(함수(){
$target.css({'width':'50%','border':'1px solid #202020','color':'#fff'});
});
전역 유형 선택기 사용 피하기
다음과 같은 식으로 쓰지 마세요: $('.something > *');
다음과 같이 작성하는 것이 더 좋습니다: $('.something').children();
여러 아이디 중복 사용 금지
다음과 같이 쓰지 마세요: $('#something #children');
이것으로 충분합니다: $('#children');
논리적 판단 || 또는 &&를 사용하여 속도 향상
다음과 같이 쓰지 마세요.
if(!$something) {
$something = $('#something ');
}
이렇게 하면 쓰기 성능이 더 좋아집니다.
$something= $something|| $('#something');
가능한 적은 코드를 사용하세요
다음과 같이 작성하는 대신: if(string.length > 0){..}
다음과 같이 작성하는 것이 더 좋습니다: if(string.length){..}
.on 메소드를 사용해 보세요
최신 버전의 jQuery 클래스 라이브러리를 사용하는 경우 .on을 사용하세요. 다른 메소드는 궁극적으로 .on을 사용하여 구현됩니다.
최신 버전의 jQuery를 사용해 보세요
최신 버전의 jQuery는 성능이 더 좋지만 최신 버전은 ie6/7/8을 지원하지 않을 수 있으므로 실제 상황에 따라 선택해야 합니다.
기본 Javascript를 사용해 보세요
jQuery에서 제공하는 기능을 Native Javascript로도 구현할 수 있다면 Native JavaScript를 사용하여 구현하는 것이 좋습니다.