[Javascript HighPerformance] DOM 스크립팅 최적화 기법

DOM은 메모리를 많이 차지하는 요소중 하나이며 전역으로 사용되기 때문에 사용을 조심히 다루는 것이 홈페이지에 속도를 최적화 할 수 있다.

 

[자바스크립트 성능 최적화 中]

1) DOM접근을 최소화 하고 자바스크립트에서 많은 구문을 작성하라

2) 자주 접근하는 DOM은 참조를 지역변수에 하여 사용하라

3) HTML 컬렉션(getElementyById, getElementsByTagName 등등)은 문서를 동적 반영하므로 조심히 다루고 length 같은 것은 변수를 복사헤서 사용하고 무거운 작업을 할 때에는 배열에 담아서 사용하라

4) 가능한 querySelectorAll 같은 빠른 API를 사요하라

5) 리페인트와 리플로우를 항상 생각하라. 스타일 변경은 한 번에 묶어서 처리하고, DOM트리를 조작할 때는 레이아웃 흐름에서 분리해서 작업 하며, 레이아웃 정보는 캐시하고 최소한만 써라

6) 애니메이션은 절대적 위치를 사용하는 것이 좋다.

7) 이벤트 위임을 사용해서 이벤트 핸들러 수를 최소화 하라