집 > 기사 > 웹 프론트엔드 > jQuery 선택기가 어디에나 있는 시대에 그 성능을 이해할 수 없습니까?_jquery

jQuery 선택기가 어디에나 있는 시대에 그 성능을 이해할 수 없습니까?_jquery

WBOY원래의: 2016-05-16 17:52:401026검색

최근에 나는 jQuery의 다양한 선택기 중 어떤 것이 더 효율적이고 다양한 상황에서 사용할 가치가 있는지 설명하기 위해 jQuery 선택기 사용에 대한 몇 가지 작은 실험을 수행했습니다.

먼저 각 테스트 페이지의 헤드에 구글에서 제공하는 jquery 파일과 테스트용 소형 플러그인인 firejspt를 소개합니다.

코드 복사 코드는 다음과 같습니다.

1. 가장 일반적으로 사용되는 id 선택자 및 클래스 선택자
다음 코드를 200번 복사하여 본문 태그.

코드 복사 코드는 다음과 같습니다.

id 선택기와 클래스 선택기 비교

이번에는 테스트한 JS 코드입니다.

코드 복사 코드는 다음과 같습니다. function ilianTest01(){

$('#ilian').click(function() { Alert('Hello World'); });

} 

function ilianTest02(){ 
$('. ilian ').click(function() { Alert('Hello World'); }); 
} 

/*테스트를 위해 2개의 함수 호출*/ 
$(function(){ 
jspt.test(function(){ ilianTest01(); }); 
jspt.test(function(){ ilianTest02(); }) 

 
 테스트 결과는 다음과 같습니다.

그림에서 알 수 있듯이 클래스 선택기에 비해 ID 선택기의 효율성 이점은 엄청납니다. . . . .

2. 태그를 선택할 때 계층적 선택기도 매우 자주 사용됩니다. 이 비교 테스트는 하위 태그 기호 ">"를 직접 사용합니다.

body 태그에 다음 코드를 넣고 li 태그를 500번 복사하세요.

코드 복사

코드는 다음과 같습니다.

직접 하위 태그 기호 ">"를 하위 태그와 비교>
직접 하위 태그 기호 ">"를 하위 태그 기호와 비교합니다. ">" 및 children

 
이 이번에 사용되었습니다. 테스트는 다음과 같습니다. 

코드 복사

코드는 다음과 같습니다.

function ilianTest01( ){ $('#ilian > li').click(function() { Alert('Hello World'); }) } function ilianTest02(){ $( '#ilian').children('li').click(function() { Alert('Hello World'); })

} 

/*테스트를 위해 2가지 함수 호출 */ 
$(function(){ 
jspt.test(function(){ ilianTest01(); }); 
jspt.test(function(){ ilianTest02(); }); 
 }) ; 

테스트 결과:

직접 하위 태그 기호 선택자보다 하위 선택자가 더 낫다는 것을 알 수 있습니다.

글의 길이에 제한이 있어 이 글은 가장 기본적인 테스트만을 보여주며, 위의 테스트는 모두 간단한 환경에서 테스트한 것입니다. 테스트 결과는 절대적인 결론을 나타내지 않습니다.

성명：

이전 기사：JavaScript 학습 노트 (1) HTML에서 JavaScript 사용_기본 지식다음 기사：JavaScript 학습 노트 (1) HTML에서 JavaScript 사용_기본 지식

jQuery 선택기가 어디에나 있는 시대에 그 성능을 이해할 수 없습니까?_jquery

관련 기사