브라우저란?

브라우저란 우리가 흔히 인터넷에 접속할때 사용하는 IE, Chrome, Firefox등을 말한다. 일반적으로 웹 브라우저는 다음과 같은 기능을 수행한다.

1. 웹 페이지를 서버에 요청하여 서버의 응답을 웹 문서 형태로 받는다.
2. 받은 웹 문서(HTML, css 등)를 렌더링하여 모니터 화면에 웹 페이지를 표시한다.

브라우저 렌더링 과정

렌더링의 기본적인 동작 과정은 다음과 같다.

1. HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing)
2. 두 Tree를 결합하여 Rendering Tree를 만든다. (Style)
3. Rendering Tree에서 각 노드의 위치와 크기를 계산한다. (Layout)
4. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. (Paint)
5. 레이어를 합성하여 실제 화면에 나타낸다. (Composite)

Parsing

렌더링 과정 중 가장 중요한 부분이 Parsing 부분인데, 브라우저는 HTML이나 CSS를 이해할 수 없기 때문에 브라우저가 이해할 수 있도록 변환하는 과정이 필요하다. 즉, 파싱은 서버로부터 전송받은 문서의 문자열을 브라우저가 이해할 수 있는 구조로 변환하는 과정이라고 할 수 있다

1. HTML Parsing
   렌더링 엔진이 HTML 문서를 수신받으면, HTML 파서는 이를 위에서부터 읽어 내려가며 파싱을 진행하고, 그 결과물로 DOM 트리를 생성한다.

2. CSS Parsing
   CSS 문서를 파싱하여 CSSOM 트리를 생성한다. CSS는 렌더링할때 반드시 필요한 리소스이기 때문에 빠르게 CSS를 로드하는게 좋고, 그래서 head 태그 안에 작성한다.

3. JS Parsing
   파싱 과정에서 script 태그를 만나면 일단 파싱을 중단하고 script를 읽는다. 그게 완료되면 중단되었던 파싱을 다시 시작한다. script 태그가 body 태그 중간에 위치할 경우 HTML 파싱을 하는 도중에 갑자기 JS 파일을 읽게 되므로 오류 발생 위험이 있다. 그래서 head 태그 안에 작성하거나, body태그 최하단에 작성한다.

Render Tree

렌더 트리란 실제 화면에 표현되는 노드들로만 구성된 트리를 말한다. 화면에 표현된다는 말은 눈에 보이는것이 아닌 화면상에서 공간을 차지하는지를 말한다.

렌더 트리 생성 과정

1. html 태그와 body 태그를 처리하며 렌더트리 루트를 구성
2. DOM의 최상위 노드부터 순회하면서 화면에 보여지지 않는 노드를 렌더 트리의 구성에서 제외한다. (렌더러는 DOM 요소에 부합하지만 1:1로 대응하는 관계는 아니다)
   ex ) 요소와 같은 비시각적 DOM 요소는 렌더 트리에 추가되지 않는다. display : none 속성은 아예 사라지는 것이므로 렌더트리에서 제외된다. 하지만 visibility : hidden 속성은 자리는 화면상에서 공간을 차지하는 속성이기 때문에 렌더트리에 반영된다.
3. 화면에 보여지는 나머지 노드에 CSSOM 규칙을 찾아 일치하는 스타일을 적용한다.
   이 과정에서 position이나 float 속성을 만나면 실제 그려지는 위치로 랜더 객체가 이동한다.)

Layout

렌더트리의 노드를 화면에 배치하는 과정을 레이아웃이라고 한다.
렌더트리 생성이 끝나면 웹페이지 화면 안에서 렌더트리에 있는 각 노드의 위치와 크기, 너비, 높이 등을 계산하고 화면에 배치하는 레이아웃 과정이 실행된다.
이 과정에서 뷰포트 내에서 생성된 render tree의 각 노드들이 스크린 상의 어느 공간에 위치해야할지가 결정된다.

Paint

레이아웃 과정에서 계산된 정보들을 바탕으로 각 노드들을 화면에 그려주는 과정이다.
렌더 트리의 각 노드를 화면의 실제 픽셀로 나타낼 때 Painting메서드가 호출된다. Painting 과정 후 브라우저 화면에 UI가 나타나게 된다. 브라우저 성능 개선을 위해 각 노드를 레이어별로 나눠서 준비한다. 그리고 변경되는 요소가 있을 경우 그 레이어만 업데이트한다.