[Browser] 렌더링 원리

Browser 기본 구조

출처 : 네이버

 

1. 사용자 인터페이스
   - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분을 뜻한다.
2. 브라우저 엔진
   - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다
3. 렌더링 엔진
   - 요청한 내용을 표시한다.(HTML을 요청하면 HTML, CSS를 파싱하여 화면에 표시한다.)
4. 통신
   - HTTP 요청과 같은 네트워크 호출에 사용된다.
   - Platform에 독립적이다.
   - 각 Platform 하부에서 실행된다.
5. 자바스크립트 해석기
   - 자바스크립트 코드를 해석하고 실행한다.
6. UI/백엔드
   - Combo Box와 창같은 기본적인 장치를 그린다.
   - Platform에서 명시하지 않은 Interface, OS 사용자 Interface를 사용한다.
7. 자료저장소
   - Cookie, Local / Session Storage 와 같이 보조 기억장치에 데이터를 저장하는 자료저장소.
   - 자주 받아오는 자료를 저장해두어 서버에 반복적으로 요청하는 작업을 줄임.
   - 캐싱(Caching)이 이루어지는 곳.

* 크롬은 대부분의 Browser와 달리 각 탭마다 별도의 Rendering Engine Interface로 유지된다.
각 탭은 독립적인 Process로 처리된다.

 

이 중에서도 렌더링 엔진(3번)에 대해 더 자세히 알아야하는데, 알아본 내용을 정리하여 써보도록 하겠다.

 

렌더링 엔진

입력 발생, 스크롤 발생, 애니메이션 동작, 비동기 요청으로 인한 데이터 로딩 등 업데이트가 필요할 때 효율적으로 렌더링을 할 수 있도록 자료 구조를 생성한다.

 

렌더링 엔진은 HTML, XML, 이미지를 표시할 수 있다.

물론 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같이 다른 유형 또한 표시할 수 잇다.

(짤막한 TMI로 FireFox는 Gecko, Safari, Chrome은 Webkit을 이용한다.)

 

동작 과정으로는 통신으로부터 요청한 문서의 내용을 얻는 것으로 시작한다.

보통 8kb 단위로 전송된다.

 

기본 동작 과정은 아래와 같이 구성된다.

1. Dom Tree 구축을 위한 HTML 파싱
2. Render Tree 구축
3. Render Tree 배치
4. Draw Render Tree

렌더링 엔진은 조금 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시한다.

모든 HTML을 파싱하기 까지 기다리지 않고 배치와 그리기 과정을 계속 진행한다.

(동작과정이 비동기로 돌면서 완료된 것을 계속해서 그린다고 생각하면 편할 것 같다.)

 

Critical Rendering Path

출처: https://calendar.perfplanet.com/2012/deciphering-the-critical-rendering-path/

위 큰 틀로 작성한 동작 과정을 세분화하여 나타낸 것이다.

 

1. 브라우저에서 사용자가 요청한 웹 페이지를 문서에 불러오고 파싱한다.(통신)
   - 불러온 내용을 어휘 분석을 통해 HTML5 표준에 지정된 고유한 토큰으로 변환한다.
   이 과정에서 필요한 CSS나 JS 파일을 불러오기도 한다.
   
   
2. Lexing(낱말 분석)을 통해 토큰이 노드 객체로 변환되어 속성과 규칙을 정한다.
   - className, id, required 등 여러 속성을 정하는 것이다.
   
   
3. 각 노드가 서로 연관성을 갖도록 DOM Tree를 생성한다.
   
   
4. CSS는 CSSOM Tree를 생성한다.
   - HTML이 DOM Tree로 만들어지는 것과 같이, CSS도 파싱과 Lexing을 통해 CSSOM Tree가 만들어진다.
   
   
5. 생성된 DOM Tree와 CSSOM Tree를 합쳐서 Render Tree를 구성한다.
   - 실제 화면에 표시 될 내용에 대해 트리를 만드는 것이다.
   
   
6. Layout 배치
   - Viewport 내에서 Node들의 정확한 위치와 크기를 계산하는 과정이다.
   텍스트나 요소의 박스가 화면에서 차지하는 영역이나, 스타일 속성이 계산된다.
   이 때 단위 em은 px 단위로 변환된다.
   - 요소의 크기나 위치가 바뀔 때, 브라우저 창 크기가 바뀔 때 다시 발생된다.
   
   
7. Draw
   - 렌더 트리에 포함된 요소들이나 텍스트, 이미지들이 실제 픽셀에 맞게 그려진다.
   - 배경 이미지나 텍스트 색상, 그림자 등 레이아웃의 수치를 변화시키지 않는 스타일의 변경이 일어났을 때 다시 발생된다.
   
   
8. Composition으로 Layer 합성(Chrome)
   - Chrome의 경우 Layout 배치 과정 이후 필요에 따라 Layer를 생성한다.
   Layer도 Tree 형태로 구성되어 Draw 과정에서 하나의 비트맵으로 합성해 페이지를 완성시킨다.
   Layout과 Draw를 수행하지 않고 합성만 발생하기 때문에 Chrome이 빠르게 작동하는 이유중 하나다.

 

(여담)

React는 Virutal DOM을 이용하기 때문에 위 과정을 계속 거치면서 Rerendering 되는 것이 아니라 Virtual DOM과 Real DOM을 비교해 Virtual DOM에서 변경 후 Real DOM에 적용을 하기 때문에 React로 코드가 구성 되어 있을 경우 Rendering이 빠른 것이다.