브라우저에 페이지를 그리는 과정은 아래와 같이 정리해 볼수 있겠다.
- HTML 마크업은 DOM(Document Object Model)으로 변환 된다.
- CSS 마크업은 CSSOM(CSS Object Model)으로 변환 된다.
- DOM과 CSSOM은 결합되어 렌더링 트리를 구축한다.
- 렌더링 트리가 만들어지면 각 노드들의 위치가 계산된다.
- 마지막으로 픽셀 단위로 화면에 그려진다.
위 과정에서 렌더링 속도에 영향을 주는 요소들이 있다.
미디어파일(이미지, 비디오 등)을 만나면 추가 요청을 보내게 되고, 스타일이 복잡할수록 화면에 페인팅되는 시간이 늘어난다. 단색은 페인트하는 데 시간과 작업이 적은 반면, 그림자나 그라데이션은 계산 과정을 거쳐 렌더링 시간을 도 소모한다. 적절한 스타일 반영이 필요하다.
자바스크립트를 만나면 실행이 완료 될때 까지 렌더링이 지연된다. 자바스크립트가 렌더링 속도에 영향을 미칠수 있다는 것이다. 최적의 성능을 제공하려면 자바스크립트를 비동기로 설정하고 주요 렌더링 경로에서 불필요한 자바스크립트를 제거하는 것이 좋다.
렌더링 트리 생성, 노드들의 위치계산, 페인트 작업을 수행하는 데 필요한 시간은 문서의 크기, 스타일, 자바스크립트 그리고 사용자의 기기에 따라 달라질수 있다.
위와 같은 과정을 이해하고 브라우저에 페이지가 렌더링되는 속도에 영향을 주는 요소들을 고려해서 개발을 진행 한다면 사용자에게 좀더 빠르게 서비스를 제공 할수 있겠다.
