jQuery Tips

jQuery 고속화

셀렉터는 되도록이면 id 셀렉터를 사용한다.

위의 경우 a 태그를 셀렉터로 지정하는 방법은 "a#topLink', "#topLink", "ul li a", "a.top_link", ".top_link" 등 몇가지가 있습니다만 jQuery가 목표로 하는 태그를 좀더 빨리 찾아내는 것은 "#topLink"입니다. jQuery의 셀렉터에서는 id명에 의한 지정이 가장 빠릅니다.

위와 같은 경우 지정하고 싶은 태그에 id속성이 없는 경우도 가장 가까이 있는 id속성으로부터 자식 셀렉터를 이용하여 "#topLink a"로 지정하는 방법이 더 빠릅니다.

클래스 셀렉터보다는 태그 셀렉터를 사용한다.

태그 검색에 시간이 많이 걸리는 것이 바로 클래스 셀렉터입니다. 예를 들어 다음과 은 HTML의 경우 "#topLink .top_link" 보다 "#topLink a"로 지정하는 경우가 빠르게 검색됩니다. 어쩔 수 없이 클래스명으로 지정하게 된다면 "#topLink a.top_link"와 같이 class명 바로 앞에 태그명을 추가합시다.

메서드체인을 이용하자

같은 태그에 대해서 복수의 명령을 실행하는 경우는 반드시 "메서드체인"을 이용합시다. 메서드체인을 이용하면 태그를 다시 검색하는 것을 생략할 수 있어서 상당한 고속화를 기대할 수 있습니다.

셀렉터를 캐싱하자

같은 태그를 지정하는 경우에도 메서드체인을 이용할 수 없는 경우는 셀렉터를 캐싱하는 것으로 처리 속도를 올릴 수 있습니다.

						$("example a").click("...");
						중략
						$("example a").append("...");
						중략
						$("example a").html("...");
					

셀렉터의 캐싱화는 셀렉터의 검색 결과(태그)를 미지 변수에 저장해 두고 이후의 처리에서는 검색 처리를 생략하는 방법입니다. 예를 들어 위의 스크립트를 캐시를 이용하여 고친다면 다음과 같습니다. 첫 번째 행에 var example = ~로 변수 "example"에 셀렉터의 검색 결과를 저장하고 있습니다.

						var example = $("#example a");
						example.click("...");
						중략
						example.append("...");
						중략
						example.html("...");
					

이 방법은 같은 function() {...} 안에서밖에 이용할 수 없다는 단점이 있습니다만 익숙해지면 자연스럽게 사용하게 되므로 좋은 방법이라 할 수 있습니다.

셀렉터의 범위를 지정하자

캐싱을 이용하여 셀렉터의 검색 범위를 줄이는 것으로 처리를 고속화하는 방법도 있습니다. 예를 들어 아래와 같은 스크립트가 있다고 합시다.

						$("example a span").click("...");
						중략
						$("example a img").append("...");
						중략
						$("example a strong").html("...");
					

이 스크립트는 아래와 같이 수정하여 사용할 수 있습니다.

						var example = $("#example a");
						$("span", example).click("...");
						중략
						$("img", example).append("...");
						중략
						$("strong", example).html("...");
					

공통되는 셀렉터 $("#example a")를 미지 변수 "example"에 저장해 두고 셀렉터 뒤에 ,(콤마)로 example을 지정하면 변수의 범위 안에서 태그를 검색합니다. HTML 전체에서 검색하는 보통의 지정 방법과 비교해서 태그의 검색에 걸리는 시간을 단축할 수 있습니다.