jquery 성능 최적화 기술(1)
11908 단어 JavaScriptjquery브 라 우 저검색 엔진교통.
http://www.artzstudio.com/2009/04/jquery-performance-rules/(영어)
참고:http://blog.benhuoer.com/posts/10-tips-for-jquery-performance.html
중급 jQuery 성능 지표 와 변조: http://www.ibm.com/developerworks/cn/web/wa-aj-advjquery/?S_TACT=105AGX52&S_CMP=tec-yesky\#resources 이 글 을 읽 는 것 을 강력 추천 합 니 다.
jquery 는 많은 js 라 이브 러 리 에서 중성 적 으로 표현 할 수 있 지만 원생 의 자바 script 으로 개발 하 는 것 이 아니 라 성능 문 제 를 중시 해 야 합 니 다.다음은 jquery 의 성능 을 향상 시 키 는 기술 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.(글 에서 테스트 에 사용 되 는 JQuery 버 전 은 1.3.2)
jQuery 는 끊 임 없 는 개발 과 개선 과정 에 있 습 니 다.Jonh 와 그의 팀 은 프로그램의 성능 을 향상 시 키 는 새로운 방법 을 끊임없이 연구 하고 있다.
2.스 크 립 트 파일 병합 및 최소 화
대부분의 브 라 우 저 는 여러 스 크 립 트 파일 을 동시에 처리 할 수 없 기 때문에 줄 을 서서 불 러 옵 니 다.불 러 오 는 시간 도 그 만큼 길 어 집 니 다.사이트 의 모든 페이지 에 이 스 크 립 트 를 불 러 오 는 것 을 고려 하여 하나의 파일 에 넣 은 다음 압축 도구(예 를 들 어 Dean Edwards)를 이용 하여 최소 화 하 는 것 을 고려 해 야 합 니 다.더 작은 파일 은 더 빠 른 로드 속 도 를 가 져 올 것 임 에 틀림없다.JavaScript 와 CSS 압축 의 목적 은 스 크 립 트 의 실행 성능 을 유지 하 는 동시에 데이터 가 전달 하 는 바이트 수 를 줄 이 는 것 입 니 다(원본 파일 을 줄 일 수도 있 고 gzip 을 이용 할 수도 있 습 니 다.대부분의 제품 급 네트워크 서버 는 gzip 를 HTTP 프로 토 콜 의 일부분 으로 합 니 다)-YUI compressor,jQuery 가 공식 적 으로 추천 하 는 압축 스 크 립 트 도구 입 니 다.
3.CLASS 가 아 닌 ID 로 최대한 많이 검색
jQuery 코드 에서 흔히 볼 수 있 는 두 가지 검색 기술 은 원소 의 ID 를 통 해 검색 하고 원소 의 CLASS 를 통 해 검색 하 는 것 이다.일반적인 자 바스 크 립 트 의 자 바스 크 립 트 라 이브 러 리 를 사용 하기 전에 ID 를 통 해 페이지 요 소 를 찾 는 것 은 상당히 간단 합 니 다.
getElementById() 방법 으로 원 소 를 빠르게 찾 을 수 있 습 니 다.그러나 자 바스 크 립 트 라 이브 러 리 가 없 으 면 CLASS 를 찾기 가 더 어렵 고 필요 한 경우 ID 에서 인 코딩 을 통 해 찾 을 수 있 습 니 다.jQuery 를 사용 할 때 CLASS 를 검색 하 는 것 은 검색 페이지 의 ID 처럼 간단 하기 때문에 이 두 검색 은 서로 바 꿀 수 있 는 것 같 습 니 다.그러나 실제 상황 은 그렇지 않다.ID 로 검색 하 는 것 이 CLASS 로 검색 하 는 것 보다 훨씬 빠르다.ID 를 통 해 검색 할 때 jQuery 는 실제 내 장 된 getElementById() 방법 만 사용 하지만,CLASS 를 통 해 검색 할 때 일치 하 는 항목 을 찾기 위해 페이지 의 모든 요 소 를 옮 겨 다 녀 야 합 니 다.페이지 가 크 고 복잡 할 수록 CLASS 를 통 해 검색 하면 응답 이 느 리 고 ID 를 통 해 검색 하면 페이지 가 커지 면서 느 려 지지 않 는 것 이 분명 하 다.jquery 에서 가장 빠 른 선택 기 는 ID 선택 기 입 니 다.자바 script 의 getElement ById()방법 에서 직접 나 오기 때 문 입 니 다.예 를 들 어 HTML 코드 가 있 습 니 다.
<div id="content">
<form method="post" action="#">
<h2> </h2>
<ul id="traffic_light">
<li><input type="radio" class="on" name="light" value="red" /> </li>
<li><input type="radio" class="off" name="light" value="yellow" /> </li>
<li><input type="radio" class="off" name="light" value="green" /> </li>
</ul>
<input class="button" id="traffic_button" type="submit" value="Go" />
</form>
</div>
아래 의 선택 기 를 사용한다 면 그것 은 비효 율 적 이다.
var traffic_button = $(".button");button 에 ID 가 있 기 때문에 ID 선택 기 를 직접 사용 할 수 있 습 니 다.다음 과 같다.
var traffic_button = $("#traffic_button");나 는 위의 두 가지 방법 에 대해 간단 한 테스트 를 실시 했다.테스트 코드 는 다음 과 같다.
<script type="text/javascript">
$(function() {
var startTime = new Date().getMilliseconds();
for(var i = 0; i < 10000; i++ ){
var traffic_button = $(".button");
// var traffic_button = $("#traffic_button");
}
var endTime = new Date().getMilliseconds();
alert(endTime - startTime);
});
</script>첫 번 째 선택 기 에 대한 여러 번 의 테스트 결 과 는 다음 과 같다.firefox 3.5.8: 650ms IE8:2200ms
두 번 째 선택 기 에 대한 여러 번 의 테스트 결 과 는 다음 과 같다.firefox 3.5.8: 200ms IE8:1500ms
위 에서 나 온 데 이 터 는 ID 를 통 해 검색 하 는 것 이 CLASS 를 통 해 검색 하 는 것 보다 훨씬 빠르다 는 것 을 보 여 준다.이것 은 어떻게 jQuery 코드 에 영향 을 줍 니까?검색 을 작성 할 때 이 기술 을 기억 하 십시오.CLASS 도 선택 할 수 있 고 ID 도 선택 할 수 있다 면 보통 ID 를 선택해 야 합 니 다.코드 에서 일부 요 소 를 검색 하려 면 ID 를 할당 해 야 합 니 다.
물론 이것 은 단일 한 원소 에 대한 것 일 뿐이다.만약 당신 이 여러 요 소 를 선택 할 필요 가 있다 면,이것 은 반드시 DOM 의 반복 과 순환 과 관련 될 것 입 니 다.성능 을 향상 시 키 기 위해 서 는 each 대신 for 를 사용 하 는 것 을 권장 합 니 다.원생 함 수 는 항상 보조 구성 요소 보다 빠 릅 니 다.대상 을 옮 겨 다 닐 필요 가 있 는 상황(예 를 들 어 원 격 으로 받 은 JSON 대상)이 발생 하면(JSON)대상 을 하나의 배열 로 다시 쓰 는 것 이 좋 습 니 다.배열 의 순환 처리 가 쉬 워 야 합 니 다.
다음은 테스트 코드:
<script type="text/javascript">
$(function() {
var array = new Array ();
for (var i=0; i<10000; i++) {
array[i] = i;
}
var startTime = new Date();
var l = array.length;
var str = "";
for(var j = 0; j < l; j++){
str += array[j];
}
//$.each(array, function(i, field) {
//str += field.value;
//})
var endTime = new Date();
alert(endTime - startTime);
});
</script>for 순환 여러 번 의 테스트 결 과 는 다음 과 같 습 니 다:firefox 3.5.8: 3ms IE8:15ms
each 여러 번 의 테스트 결 과 는 다음 과 같 습 니 다:fireforx 3.5.8: 30ms IE8:30ms
4.선택 기 에 앞 뒤 글 을 지정 합 니 다(가능 한 한 많은 검색 정 보 를 제공 합 니 다)
jQuery 의 참고 문서 에 따 르 면:
jQuery()원시 DOM 노드 에 전 달 된 앞 뒤 문장(전 달 된 것 이 없 으 면 앞 뒤 문장 은 전체 문서).
선택 기와 함께 더욱 정확 한 조 회 를 실현 하 는 것 이 목적 이다.
따라서 클 라 스 를 이용 하여 목 표를 지정 하려 면 jQuery 가 전체 DOM 문 서 를 옮 겨 다 니 지 않도록 최소한 선택 기 에 컨 텍스트 를 지정 해 야 합 니 다.
jQuery 에서 두 번 째 로 빠 른 선택 기 는 tag(태그)선택 기(예 를 들 어$(head)입 니 다.원생 getElement sByTagName()방법 에서 왔 기 때 문 입 니 다.도대체 자바 스 크 립 트 코드 를 고려 한 후에 이것 은 이상 할 것 이 없다.요소 표 시 를 제공 함으로써 CLASS 매개 변수 와 일치 하 는 검색 요소 의 수량 이 크게 줄 어 들 고 검색 성능 을 이 사례 의 ID 검색 과 비슷 하 게 향상 시 킵 니 다.개발 자 들 은 jQuery 가 방법 을 선택 할 때 게 으 름 을 피 워 서 는 안 된다.jQuery 의 간단 함 에 도 불구 하고 게 으 름 을 피 우려 는 욕망 이 생 긴 다.간단하게 경 계 를 늦 추 셨 습 니 다.검색 메커니즘 이 이렇게 간단 해 져 서 우 리 는 한 가지 정보 만 입력 하 는 경향 이 있다.그러나 귀 하 는 항상 가능 한 한 많은 정 보 를 입력 해 야 합 니 다.특히 이미 알 고 있 는 정 보 를 입력 해 야 합 니 다.
아까 그 HTML 코드 계속 봐.
예 를 들 어 빨간색 과 녹색 체크 상 자 를 선택해 야 한다 면 tag name 을 사용 하여 class 를 제한 할 수 있 습 니 다.(가 까 운 ID 를 잊 지 마 세 요):다음 과 같 습 니 다.
var active_light = $(‘#traffic_light input.on’); 메모:jquery 에서 Class 는 가장 느 린 선택 기 입 니 다.IE 브 라 우 저 에 서 는 모든 DOM 노드 를 옮 겨 다 닙 니 다.tag.class 방식 은 IE 에서 의 성능 입 니 다. lass 방식 보다 낫다.Firefox 에서 직접.class 방식 보다 낮 습 니 다.Google 브 라 우 저 는 두 가지 모두 차이 가 많 지 않 습 니 다.
tag 를 사용 하여 class 를 수식 할 때 다음 과 같은 몇 가 지 를 주의해 야 합 니 다.
(1)tag 를 사용 하여 ID 를 수식 하지 마 십시오.다음 과 같 습 니 다.
var content = $("div#content");이렇게 되면 선택 기 는 모든 div 요 소 를 옮 겨 다 니 고\#content 와 일치 합 니 다.
다음은 나의 테스트 결과 이다.
테스트 Htm 코드 는 다음 과 같 습 니 다.div 탭 을 여러 번 복 사 했 습 니 다.
<div class="demo" id="demo">
<div >
<form method="post" action="#">
<h2> </h2>
</form>
</div>
<div id="content">
<form method="post" action="#">
<h2> </h2>
<ul id="traffic_light">
<li><input type="radio" class="on" name="light" value="red" /> </li>
<li><input type="radio" class="off" name="light" value="yellow" /> </li>
<li><input type="radio" class="off" name="light" value="green" /> </li>
</ul>
<input class="button" id="traffic_button" type="submit" value="Go" />
</form>
</div>
<div >
<form method="post" action="#">
<h2> </h2>
<ul id="traffic_light">
<li><input type="radio" class="on" name="light" value="red" /> </li>
<li><input type="radio" class="off" name="light" value="yellow" /> </li>
<li><input type="radio" class="off" name="light" value="green" /> </li>
</ul>
<input class="button" id="traffic_button1" type="submit" value="Go" />
</form>
</div>
<div >
<form method="post" action="#">
<h2> </h2>
</form>
</div>
<div >
<form method="post" action="#">
<h2> </h2>
</form>
</div>
<div >
<form method="post" action="#">
<h2> </h2>
</form>
</div>
</div><!-- End demo-description -->JS 코드 는 다음 과 같다.
<script type="text/javascript">
$(function() {
var startTime = new Date();
for(var i = 0; i < 10000; i++){
var content = $("div#content");
//var content = $("#content");
}
var endTime = new Date();
alert(endTime - startTime);
});
</script>첫 번 째 선택 기 에 대한 여러 번 의 테스트 결 과 는 다음 과 같다.firefox 3.5.8: 610ms IE8:1650ms
두 번 째 선택 기 에 대한 여러 번 의 테스트 결 과 는 다음 과 같다.firefox 3.5.8: 175ms IE8:1220 ms(2)ID 로 ID 를 수식 하 는 것 도 사족 을 그 리 는 것 이다.다음 과 같다.
var content = $("#content #traffic_button");다음 테스트 진행:
테스트 한 HTML 코드 는 위의 코드 입 니 다.js 코드 는 다음 과 같 습 니 다.
<script type="text/javascript">
$(function() {
var startTime = new Date();
for(var i = 0; i < 10000; i++){
var content = $("#traffic_button");
//var content = $("#content #traffic_button");
}
var endTime = new Date();
alert(endTime - startTime);
});
</script>첫 번 째 선택 기 에 대한 여러 번 의 테스트 결 과 는 다음 과 같다.firefox 3.5.8: 185ms IE8:1205ms
두 번 째 선택 기 에 대한 여러 번 의 테스트 결 과 는 다음 과 같다.firefox 3.5.8: 655ms IE8:1650ms
위의 테스트 결 과 를 통 해 알 수 있 듯 이 ID 로 ID 를 수식 하여 선택 할 때 요 소 를 찾 는 과정 이 효율 적 이지 않 고 오히려 낮 아 질 수 있다.
(3)속성 선택 기 를 사용 할 경우 tag 로 수정 하 십시오.다음 과 같 습 니 다.
$('p[row="c3221"]').html(); ：$('[row="c3221"]').html();위의 테스트 결 과 를 보면 자 바스 크 립 트(jquery)의 성능 에 영향 을 미 치 는 것 은 코드 자 체 를 제외 하고 또 다른 중요 한 부분 은 자 바스 크 립 트 를 실행 하 는 브 라 우 저 입 니 다.모든 브 라 우 저 내부 에는 자 바스 크 립 트 코드 를 분석 하고 실행 하 며 웹 응용 프로그램 페이지 를 처리 하 는 이 컴퓨터 코드 가 포함 되 어 있 습 니 다.따라서 자바 스 크 립 트 의 성능 은 클 라 이언 트 가 사용 하 는 브 라 우 저 에 크게 의존 하고 있 습 니 다.경험 이 있 는 사람 이 테스트 한 결과 브 라 우 저가 성능 에 미 치 는 영향 은 자바 스 크 립 트 라 이브 러 리 의 9 배 에 달 하 는 것 으로 나 타 났 습 니 다.또 하나의 중요 한 결론 은 구 글 의 브 라 우 저 크롬 은 가장 빠 른 자 바스 크 립 트 엔진 이다.Firefox 와 Safari 가 그 다음 이 고 IE(특히 IE6,그 해석 속도)는 가장 느 린 자 바스 크 립 트 엔진 이다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
