jQuery Performance 향상 방법

jQuery Performance 향상 방법

- 내장 메서드 사용.

: ID & Element 사용하기 - 브라우저 내장객체 getElementById() or getElementByTagName() 사용

: class selector 느림 - getElementByClassName() 사용시 빠름(IE5~8 내장객체 없음)

: 브라우저 중에 querySelector, querySelectorAll을 지원하면 빠름

- 자바스크립트를 사용. DOM 객체 프로퍼티 접근방법

- 자주쓰는 제이쿼리 객체 변수에 저장하는 캐싱 사용.

- 메서드 체이닝 사용

- 이벤트 위임(event delegation) 사용

- DOM 노드 추가 삭제 작업 최소화

 : append()는 한번만 사용

 : detach() 사용

 : data() 사용법 $(‘#elem’).data(key, value); (x), $.data(elem, key, value);

- loop는 자바스크립트 for, while이 제이쿼리보다 빠름. 사용 자제.

사용 개념 정리

1. Context.

미리 지정한 jQuery 객체를 변수에 할당.

자주 사용할 jQuery객체를 변수에 담아서 사용. (캐싱이라는 패턴)

2. 이벤트 위임(event delegation)

버블 속성 : 하위 element에서 이벤트가 발생하면 상위 element로 위임, 이벤트 발생.

상위 element에 이벤트 handler를 등록 > 하위 이벤트가 발생 > 상위 이벤트 이동 > 핸들러 작동. 하위 이벤트에서 발생했는지 확인 > 이벤드 핸들러 실행.

하위 엘리멘트 100개에 이벤트 handler 등록 : 상위 element 1개에 이벤트 handler 등록이 더 효율적

3. detach()

노드를 DOM에서 제거하면서 캐싱

* 참고

아래 사이트에 정리된 내용을 보고 학습 요약한 내용입니다.

http://codefactory.kr/2011/12/07/jquery-performance-tips-and-tricks/