브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한다.
브라우저별 렌더링 엔진
HTML, CSS, JS, 이미지 들 웹페이지에 포함된 모든 요소를 화면에 보여주는 것을 브라우저 렌더링이라고 한다.
업데이트가 필요할 때, 효율적으로 렌더링 할 수 있도록 자료 구조를 생성한다.
브라우저별 렌더링 엔진은 웹 표준화 기구를 모두 따르고 있으며 엔진별 세부 기능들이 조금씩 다르다.
- 크롬 - Blink
- 사파리 - WebKit
- 파이어 폭스 - Geko
이 글에서는 브라우저 렌더링 엔진의 동작과정을 크롬(chrome) 엔진에 초점을 맞춰 작성하도록 하겠다.
동작과정 (Critical Rendering Path)
1. DOM Tree와 CSSOM Tree의 생성
이 과정에서는 사용자가 요청한 웹페이지에 문서를 블러오고 파싱한다.
브라우저 렉싱과정을 통해 토큰화된 토큰이 해당 속성과 규칙을 정의하는 노드 객체로 변환된다.
각 노드가 연관된 속성을 가질 수 있도록 트리를 생성하는데 이 것이 DOM Tree 이다.
CSS로는 DOM이 어떻게 화면에 표시될지 알려주는 역할을 하는 CSSOM Tree가 생성되게 된다.
이렇게 DOM Tree와 CSSOM Tree를 합쳐서 생성한 트리를 렌더트리(Render Tree)라고 한다.
2. 렌더트리(Render Tree) 생성
화면에 표시되어야할 모든 노드의 컨텐츠, 스타일 정보를 포함하는 트리를 렌더트리(Render Tree)라고 한다.
Document 객체로부터 각 노드를 순회하면서 각각에 맞는 CSSOM을 찾아 규칙을 적용한다.
렌더와 관련된 요소들을 모두 렌더 트리에 포함하지만 meta태그, display:none 요소는 렌더와 관계없이 트리에 포함하지 않는다.
렌더트리는 브라우저마다 상이할 수 있다.
3. 렌더트리(Render Tree) 배치 - Layout
렌더트리를 배치하는 것을 Layout이라고 칭하며 이는 Reflow라고도 불린다.
이 과정에서 뷰포트(View Port) 내 요소들의 위치와 크기를 계산한다.
4. 렌더트리(Render Tree) 그리기 - Paint
마지막으로 렌더트리를 화면에 실제 픽셀로 그리는 것을 Paint 라고 한다.
UI 가 업데이트 되는 상황
- Layout이 다시 발생할 경우
- 요소의 크기나 위치가 바뀔 때, 혹은 브라우저 창의 크기가 바뀔때
- Paint 부터 다시 발생할 경우
- 배경 이미지나 텍스트 색상, 그림자 등 레이아웃의 수치를 변화시키지 않는 스타일의 변경이 일어났을 때
- 레이어의 합성만 다시 발생할 경우
- Layout과 Paint를 수행하지 않고 레이어의 합성만 발생하기 때문에 성능상으로 가장 큰 이점을 가진다.
