브라우저 렌더링에 대해 이야기하기전 꼭 알아야하는 용어를 먼저 정리하고 가겠다.
파싱 :
프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽고 실행하기 위해 텍스트 문자의 문자열을 분해하고 구조를 생성하는 일련의 과정
렌더링 :
HTML, CSS, JavaScript로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것
브라우저 렌더링과정을 큰 틀에서 보자면 다음과 같다.
HTML파일을 서버에 요청하고 응답받고, CSS파일을 서버에 요청하고 응답받고, JavaScript파일을 서버에 요청하고 응답받는 과정이라고 생각하면 이해가 빠를것이다.
브라우저의 요청에 의해 서버가 응답한 HTML문서는 문자열로 이루어진 텍스트 파일이다.
따라서 브라우저가 이 HTML문서를 이해하기위해서는 일종의 번역과 같은 과정이 필요하다.
이러한 과정은 앞서 이야기한 "파싱" 이라고 하며
HTML문서를 파싱하여 브라우저가 이해 할 수 있는 노드들로 구성된 트리 자료구조의 결과물을 DOM이라고 한다.
DOM :
DOM(Document Object Model)은 웹 페이지의 구조를 나타내고, 웹 페이지의 요소에 접근하고 조작하는 인터페이스를 제공하는 프로그래밍 언어 중립적인 인터페이스입니다. 웹 페이지의 HTML, XML 또는 XHTML 등의 문서를 계층적인 트리 구조로 표현합니다.
DOM과 CSSOM이 생성되면 이 둘은 렌더링을 위해 렌더 트리로 결합된다.
렌더 트리는 브라우저 화면에 보여지지 않는 것들은 포함하지 않는다. 즉 렌더트리는 브라우저 화면에 렌더링되는 노드만으로 구성된다.
이후 렌더 트리는 HTML 요소의 레이아웃(위치와 크기)을 계산하는 데 사용되며, 브라우저 화면에 픽셀을 렌더링하는 페인팅 처리에 입력된다.
최종적으로 정리하면 다음과 같다.
- 사용자가 브라우저로 웹사이트에 접속 -> 브라우저가 ip파악
- 브라우저가 서버에서 HTTP Request
- 서버가 브라우저에게 HTTP Response
- HTML을 파싱하여 DOM Tree 생성
(중간에 style 태그가 나오면 CSSOM Tree 생성, 중간에 script 태그가 나오면 AST 생성 후 실행) - DOM과 CSSOM이 생성되면 렌더링을 위해 렌더트리로 결합
- Render Tree에 있는 node를 배치(Layout)
- Render Tree에 있는 node의 UI를 그림(Paint)
- Render Tree에 있는 node를 순서대로 구성(Composition)
- 웹 사용자에게 결과화면을 출력
