웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

제이쿼리 속도 개선하는 방법 및 팁

Last Modified : 2015-10-30 / Created : 2015-07-07
5,008
View Count

자바스크립트의 제이쿼리를 사용할 경우 어떻게 해야 불필요한 코드를 없애고 속도를 향상시킬 수 있는 방법에 대하여 정리하였습니다.

# DOM요소를 찾을때 태그 또는 클래스(class) 단위로 선택하는 것보다 아이디(id)값을 활용할 것
예를들어 <body id="bodyId" class="bodyClass">라는 태그가 있는 경우 $('body'), $(''.bodyClass)
보다는 $('#bodyId')의 성능이 일반적으로 우수하다.

# 코드가 복잡할수록 선택자를 최적화하는 것이 서칭이 빠르다.(하지만 항상 그런 것은 아니다.)
간단하게 body태그 안에 test 클래스를 가진 태그가 있는 경우 일반적으로 $('.test')보다는 $('body .test')가 더 빠를 수 있다. 특히 이런 경우 아이디를 기준으로 찾는편이 효과가 좋다. $('#bodyId .test')

# 숫자타입 변수 test에 1을 추가할 경우 test++, ++test 둘중에서 ++test가 성능이 더 좋다.

# 동일한 DOM요소를 반복적으로 사용해야하는 경우 변수에 저장할 것
예를들어 $('#test')를 여러번 사용할 경우 이를 코드에 직접 사용하면 브라우저에서 반복해 요소를 찾아야하므로 이를 특정변수에 저장(Ex. test = $(#test);)한 후 test 변수를 사용할 것

# 페이지 소스가 다 열릴 필요가 없다면 window.onload() 도는 $("document").ready()와 같은 구문을 사용하지 말 것.

# 꼭 제이쿼리를 사용할 이유가 없다면 순수 자바스크립트를 사용하는 것이 더 빠르다.
아래의 글도 찾고 계시지 않나요?

    Previous

    [자바스크립트] 클로저를 활용하여 setTimeout을 실행하는 방법

    Previous

    [jQuery] 이전 또는 다음 요소 선택하기, prev(), next()