브라우저 렌더링 과정

브라우저 동작 과정

기본 동작 과정은 다음과 같다.

1. HTML 파일과 CSS 파일을 파싱해 render tree 만들기 (Parsing / Style)
2. Render tree에서 각 노드의 위치와 크기를 계산한다. (Layout)
3. 계산된 값을 이용해 화면 상의 픽셀로 변환하고 레이어를 만든다. (Paint)
4. 레이어를 합성하여 실제 화면을 띄운다(Composite)

다음은 각 과정을 조금 더 세부적으로 알아보자.

1. HTML 파일과 CSS 파일을 파싱해 render tree 만들기 (Parsing / Style)

위 사진은 각각 DOM, CSSOM, Render Tree 이해를 돕기 위한 예시 사진이다.
만들어지는 과정을 쪼개보면 이렇다

1. 브라우저 주소창에 특정 주소를 입력
2. 해당 주소의 서버를 찾아가고 DNS가 실제 서버가 있는 곳으로 연결한다.
   이 때 http, https 각 조건에 맞는 방식으로 통신을 하는데, https는 SSL이 추가되어 통신에 보안을 강화한 것이라 보면 된다.
3. 서버에서 요청 받은 html파일을 클라이언트에 보내준다.
4. html 받은 브라우저가 텍스트를 파싱하여 DOM트리를 만들어 나간다.
   받은 데이터는 텍스트 형식으로 되어있다. 쉽게 생각해보면 html문서를 텍스트로 정리한 형식이라 볼 수 있을 것이다. (시작 태그는 html, 끝나는 태그html, 내용 시작태그 body.... )이 텍스트를 html로 DOM트리 구조를 갖추고 변경한다.
5. html을 읽는 도중 css 요청이 발생하면 css를 파싱한다.
6. 완성된 DOM 트리와 CSSOM 트리(CSS 돔 트리) 를 합쳐 Render 트리는 만든다.
7. script 태그를 만나면 JS코드를 실행하기 위해 파싱을 중단한다.
8. 권한을 JS 엔진에게 넘기고, JS 코드 파싱하고 실행한다.

Render tree에서 각 노드의 위치와 크기를 계산한다. (Layout)

이 단계에서는 만들어진 Render 트리를 어떻게 배치할지 정확한 위치와 크기를 계산하는 단계이다.
root부터 노드를 순회하면서 정확한 크기와 위치를 계산하고 크기가 %등 상대적으로 작성될 경우 그 값을 px단위로 변환한다.

3. 계산된 값을 이용해 화면 상의 픽셀로 변환하고 레이어를 만든다. (Paint)

이 단계는 말 그대로 그리는 작업을 하게 된다. Layout단계에서 계산한 크기를 화면상 실제 px로 변환하며 이때 결과는 하나의 레이어가 아닌 여러 개의 레이어로 관리된다.
이 부분에서 스타일이 복잡할 수록 Paint 시간이 늘어난다. 예를 들어 단색 배경은 비교적 빠르고 그림자 효과 같은 복잡한 css는 시간을 늘린다.

4. 레이어를 합성하여 실제 화면을 띄운다(Composite)

Paint 단계까지 끝났다면 생성된 레이어를 합성하여 실제 화면에 나타낸다. 그리고 client는 화면에서 웹 페이지를 볼 수 있게 된다.

참고 블로그