브라우저 렌더링
브라우저 렌더링이란 HTML, CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 의미한다. 브라우저마다 다르지만, 브라우저는 기본적으로 렌더링을 수행하는 엔진을 가지고 있다.
렌더링 과정은 이렇게 설명할 수 있다.
- 사용자가 브라우저를 통해 웹 사이트에 접속한다.
- 브라우저는 서버로부터 HTML, CSS, JavaScript 와 같은 웹사이트에 필요한 리소스를 다운 받는다.
- 렌더링 엔진은 전달받은 HTML 문서를 파싱해 DOM 트리를 만든다.
- 이어서 다운 받은 CSS 파일과 함께 포함된 스타일 요소를 파싱해 CSSOM 트리를 만든다.
- 만든 DOM 트리와 CSSOM 트리를 결합해 Render 트리를 구축한다.
- 레이아웃 과정을 통해 각 요소를 어디에 배치할 지 결정한다.
- 레이아웃 과정이 끝나면 UI 백엔드에서 Render 트리를 화면에 그리기 시작한다. 이 과정을 paint 라고 한다.
파싱
파싱이란 프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석을 하는 단계이다. 이런 파싱을 파서가 진행하며, 일종의 인터프리터나 컴파일러 구성 요소 중 하나이다. 파서는 HTML파일의 코드를 문법적 의미를 갖는 최소 단위인 토큰으로 한 번 분해하고, 이 토큰들을 문법적 의미와 구조에 따라 노드라는 요소로 바꾼다.
노드들은 상하관계에 따라 하나의 트리를 형성하는데 이를 파스 트리, 혹은 문법 트리 라고 부른다.
문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다. 렌더링 과정에서는 HTML 파일을 바탕으로 DOM 트리를 구축하고 CSS 파일로 CSSOM 트리를 만드는 것을 파싱한다고 표현한다.
DOM Tree
DOM은 HTML 문서의 요소들의 중첩 관계를 기반으로 노드들을 트리 구조로 구성한 것을 의미한다.
브라우저는 자바스크립트 언어만 알아듣기 때문에 HTML의 태그나 속성들을 이해하지 못한다.
또한 응답으로 받아온 HTML 문서는 텍스트로만 이루어져 있다. 그래서 이해할 수 있는 형태인 객체로 바꿔준 것이 바로 DOM Tree 이다.
CSSOM Tree
HTML 파일을 DOM 트리로 파싱하던 브라우저는 <link> <style>태그를 만나게 되면 파싱을 멈추고 해당 리소스 파일을 서버로 요청한다.
이렇게 요청한 파일을 HTML 파일과 마찬가지로 파싱을 하는데, 파일을 파싱해 만든 트리를 CSSOM이라고 한다. CSS Object Model의 줄임말이며, 이 CSSOM 트리를 구축하고 나면 브라우저는 다시 HTML 파일의 파싱을 멈췄던 부분으로 돌아가서 마저 DOM 트리를 파싱한다.
Render Tree
DOM 트리와 CSSOM 트리는 트리 구조로 되어 있기 때문에 비슷하게 생겼지만, 애초에 리소스부터 틀린 서로 다른 속성을 가진 독립적인 트리이다.
그렇기 때문에 브라우저 위에 웹사이트를 표시하기 위해서는 이 둘을 합치는 작업이 반드시 필요하다.
렌더 트리는 이름처렁 렌더링을 목적으로 만들어지는 트리이다. 렌더링은 사용자에게 브라우저가 보여주고자 하는 과정이므로, 보이지 않을 요소들은 이 트리에 포함시키지 않는다.
Layout
브라우저 렌더링에서 레이아웃 과정은 우리가 웹 개발에서 평소 말하는 웹 페이지 레이아웃 짜기, 디자이너들의 레이아웃과는 다른 개념이다. 여기서 말하는 레이아웃은 렌더트리를 기반으로 HTML 요소의 레이아웃(위치, 크기 등)을 계산하여 브라우저 화면 어디에 배치할 지 결정하는 과정이다.
Paint
위치에 대한 계산을 마치면 브라우저는 화면 위에 레이아웃에서 결정된 대로 그림을 그리기 시작한다.
브라우저 화면은 픽셀이라고 하는 작은 점들로 구성되어 있다. 각 정보를 가진 픽셀들이 모여 하나의 화면을 구성한다.
페인팅은 이런 픽셀에 대한 정보들을 바탕으로 픽셀을 채워나가는 과정이며, 이 과정까지 해내야 텍스트에 불과했던 HTML 파일의 내용들이 이미지화된 모습으로 브라우저 화면에 띄워지는 것이다.
