웹브라우저의 동작과정
성능 최적화에 앞서 웹 브라우저의 동작과정을 이해할 필요가 있다. 브라우저는 웹 페이지에 필요한 리소스를 내려받고 해석한 다음 여러 계산 과정을 거쳐 콘텐츠를 화면에 보여 준다. 이를 브라우저의 로딩 과정이라고 하며 다운로드, 파싱, 스타일, 레이아웃, 페인트, 합성 단계로 나뉜다.
- 파싱
우리가 웹 페이지에 접속하게 되면, 네트워크를 통해 해당 웹 페이지의 HTML 문서를 다운로드 한다. 이 때 다운로드한 HTML문서를 해석하여 DOM트리를 구성하는 단계를 파싱이라고 한다. 파싱 중 <script /> , <link /> , <img /> 를 발견하면 각 리소스를 요청하고 다운로드 한다. HTML 또는 리소스에 CSS가 포함된 경우 CSSOM 트리 구성 작업도 함께 진행한다.
2. 스타일
파싱 과정을 거쳐 만들어진 DOM트리와 CSSOM트리를 조합하여 브라우저는 렌더 트리를 구성한다. 이 과정을 스타일이라고 하며 만들어진 렌더 트리는 화면에 나타나는 요소, 스타일, 순서를 명세하는 트리이다.
3. 레이아웃
레이아웃 단계에서는 노드의 정확한 위치와 크기를 계산한다. 노드의 정확한 크기와 위치를 파악하기 위해 루트 부터 노드를 재귀적으로 순회하면서 계산하고 결과를 렌더 트리에 반영한다. 만약 CSS에서 크기 값을 %로 지정하였다면, 레이아웃 단계를 거친 후 % 값은 계산되고 측정 가능한 픽셀 단위로 변환된다.
4. 페인트
레이아웃 단계를 통해 화면에 배치된 엘리먼트들에게 색을 입히고 레이어의 위치를 결정하는 단계이다. 이 단계 역시 루트 부터 재귀적으로 실행이 됩니다.
5. 합성
페인트 단계에서 생성된 레이어를 합성하여 화면에 업데이트한다. 이 후 렌더 단계가 끝나면 화면에서 웹페이지를 볼 수 있다.
브라우저 로딩 과정 요약
다음 포스트에서는 로딩 과정에서 성능에 영향을 줄 수 있는 요소를 알아보고 로딩 과정에서 성능 최적화를 할 수 있는 방법에 대해 정리 해보려고한다.
참고 자료
