[jQuery] 선택자(selector) id, name, class 비교해보기

업무 하면서 input 태그를 사용하는 일이 많아졌다.

그러다 문득 1개의 input 태그를 id로 가져오는 것과 name으로 가져오는 것의 차이가 궁금했고

여러 개의 input을 가져올 때 name과 class도 비교해보고 싶었다.

 

우선 한 개의 태그를 기준으로 비교해봤다.

 

<input id="idTest" />
<input name="nameTest" />
<input class="classTest" />

 

console.time("time");

for(var i=0; i<1000; i++) {
    $("#idTest").val(i);			// case 1 : 4 ~ 5 ms
    $(".classTest").val(i);			// case 2 : 7 ~ 9 ms
    $("input[name='nameTest']").val(i);		// case 3 : 33 ~ 45 ms
}

console.timeEnd("time");

 

단건 태그의 경우 id > class > name 순으로 빠른 것을 확인했다.

단건 태그는 id로 진행해야겠고 부득이한 경우에는 name보다는 class를 활용하는 게 좋겠다.

 

그럼 여러 개의 태그는 어떨까?

 

<input name="nameTest" />
<input name="nameTest" />
<input name="nameTest" />

<input class="classTest" />
<input class="classTest" />
<input class="classTest" />

 

console.time("time");

for(var i=0; i<1000; i++) {
    $(".classTest").val(i);			// case 1 : 12 ~ 15 ms
    $("input[name='nameTest']").val(i);		// case 2 : 38 ~ 45 ms
}

console.timeEnd("time");

 

여러 개의 태그를 가져올 수 있는 class와 name을 비교해봤다.

class가 더 빠른 것을 확인했고 name의 경우 1개의 태그로 제어했을 때와 비슷한 속도인 것이 특이했다.

여러 개의 태그를 제어할 땐 class로 활용하는 게 좋겠다.

 

단순한 예제로 비교해봤지만 어떤 것을 사용해야 알맞은지 정리가 된 것 같다.

다음에도 궁금한 내용은 비교하면서 정리해봐야겠다.