DOM 최적화하기

HTML을 DOM으로 전환하는 과정은 구문 분석이 관대하다. 그런데 실수에 의해서 문법 오류가 발생한다 해도 브라우저에는 정상적으로 표현되는 경우가 많다. 그 이유는 브라우저가 이러한 문법 오류를 스스로 검출해서 그 에러를 바로잡아 주기 때문이다. 그렇기 때문에 웹 페이지 내에 오류가 많을수록 더 많은 메모리와 CPU 자원을 소모하게 된다.

따라서 HTML의 구문 오류를 최소화하고 간소화하는 것이 웹 사이트 성능을 향상시키는 기본적인 방법이다.

또한 과도하고 복잡한 HTML 태그의 중첩 사용 역시 피해야 한다. 만약 자바스크립트에 의해서 스타일이 변경되면, 다시 reflow와 repaint가 일어나면서 계산하는 데에 더 많은 시간이 들어가게 된다. 책에서는 중첩된 태그들이 최소 15단계를 넘지 않도록 작성하는 것이 좋다고 한다.

DOM Monster

mir.aculo.us JavaScript with Thomas Fuchs " DOM Monster Bookmarklet

DOM을 분석해서 최적화 방안을 알려주는 도구이다(사용법).

자바스크립트와 CSS 배치하기

애초에 CSS 파싱과 HTML 파싱은 서로 다른 스레드를 사용하지만, 자바스크립트는 이미 생성된 DOM과 CSSOM을 변경시킬 수 있기 때문에 문제가 된다.

만약