이 포스트에서 다룰 것
우리가 브라우저를 켜서 사이트에 접속하면 브라우저 내부에서는 어떤 일이 발생하는지를 알아본다.
IP주소 확인
먼저 우리가 주소창에 www.abc.com이라고 치게 되면, 웹 브라우저는 DNS에게 호스트의 IP주소를 물어보게 된다.
브라우저: www.abc.com의 IP주소를 알려줘!
DNS: 이 호스트의 IP주소는 1.1.1.1이야.
이 과정은 이 포스트에서 자세하게 다루었다.
3-way Handshake
그러면 브라우저는 이 IP주소에 있는 서버를 찾아간다. 이 때 랜덤한 숫자를 적은 번호표를 들고 가는데, 이걸 Random Sequence라고 한다. 이 번호표를 서버에게 건네면서 악수를 요청하고, 서버는 번호표에 1을 더해서 다시 브라우저에게 돌려준다. 브라우저는 받은 번호표에 다시 1을 더해서 서버에게 다시 건네는데, 이 과정을 3-Way Handshake라고 한다. 데이터를 주고받기 위해 Handshake가 끝나면, 브라우저는 이제 서버에게 자료를 요청할 수 있다.
HTTP Request & Response
이제 자료를 요청할 수 있게 된 브라우저는, 서버에게 해당 주소(www.abc.com)에 있는 데이터를 요청하는데, 이것이 HTTP Request이다. 서버가 요청을 받으면 브라우저에게 데이터를 보내주는데, 이를 Http Response라고 한다.
데이터 Parsing
브라우저는 받은 데이터를 사용자가 보기 좋게 예쁘게 출력해줘야 한다. 그런데 데이터를 출력하려면, 브라우저는 서버로부터 받은 데이터를 해석해야 한다. 대부분의 브라우저는 웹 표준화 기구 W3C에 따라서 HTML과 CSS를 해석한다. 그리고 이렇게 해석하는 것을 Parsing이라고 한다.
Render Tree 생성
Construction
먼저 브라우저의 렌더링 엔진은 HTML을 Parsing하여 Dom Tree를 생성한다. 우리가 HTML을 작성할 때 상위 요소 안에 하위 요소를 넣은 구조를, 트리 구조로 생성하는 것이다.
이 때 브라우저 렌더링 엔진이 <style> 태그를 만난다면 HTML Parsing 작업을 중단하고, CSS Parsing을 시작하여 CSSSOM Tree를 생성한다. CSS Parsing을 마치면 아까 중단했던 HTML Parsing 을 계속 진행한다. 이것이 CSS를 <head>안에 둬야 하는 이유데, 파싱 과정에서 Dom Tree가 생성되어도 CSSOM Tree가 없으면 렌더링이 되지 않는다. CSSOM Tree를 빠르게 생성하기 위해서 <head>안에 CSS 파일을 넣는 것이 좋다.
그러다가 <script> 태그를 만나면, 다시 HTML Parsing을 중단하고 이번에는 자바스크립트 엔진에게 권한을 넘긴다. 자바스크립트 엔진은 코드를 해석하여 Abstract Syntax Tree(추상 구문 트리), AST를 만들고 실행 한다. 그 다음으로 아까 중단한 HTML Parsing 작업을 완료한다. 이는 마찬가지로 JS를 body 맨 아래에 둬야 하는 이유인데, 스크립트 파일을 읽는 동안 렌더링에 방해가 되어 무거운 스크립트가 실행될 때는 사용자 입장에서 웹페이지가 느리게 보인다.
그리고 브라우저는 Dom Tree와 CSSOM Tree를 합쳐서 Render Tree를 생성한다. 이 Render Tree를 생성하는 과정까지를 Construction이라고 부른다.
화면에 데이터 출력
Operation
이제 렌더링 엔진이 Layout(또는 Reflow) 작업을 시작하는데, 이 작업은 만들어진 Render Tree의 노드들을 화면의 올바른 위치에 표시하는 것이다. 그 다음 UI Backend가 Render Tree의 노드들을 돌면서 화면에 UI를 그린다(Paint). 그 다음 노드들의 레이어를 순서대로 구성하는 Composition 작업이다. z-index가 낮은 요소를 먼저 놓고, 높은 요소를 그 위에 쌓는 작업이다. Layout, Paint, Compsition까지의 과정을 Operation이라고 한다.
그런데 이 UI를 그리는 모든 과정은 서버로부터 모든 데이터를 받은 후에 시작하는 것이 아니라, 받아오는 과정에 먼저 받은 데이터 먼저 그려준다. 이 때문에 웹페이지 화면이 한번에 뜨지 않고 부분적으로 뜨는 현상이 일어나는 것이다.
Reflow와 Repaint
렌더링을 마치고 최종적으로 브라우저에 페이지가 그려진다. 하지만 자바스크립트를 이용해 DOM을 조작한다던가, 마우스 hover 등 특정 이벤트에 의해 HTML요소에 변화가 생기게 되면 해당 요소에 영향을 받는 자식,부모 노드를 포함하여 Layout(Reflow)를 다시 수행하게 된다.
각 요소의 배치와 위치를 다시 계산(Reflow)하고, 이 Reflow된 렌더 트리를 다시 페이지에 그려주는 과정을 Repaint라고 한다. Reflow와 Repaint가 반드시 같이 수행되지는 않는다. 예를 들어 위치의 변경 없이 버튼의 색상만 변경하는 경우 Reflow 없이 Repaint만 일어날 것이다.
정리
- 사용자가 브라우저에 웹사이트에 접속한다.
- 브라우저는 DNS를 통해 웹 서버의 IP 주소를 파악한다.
- 브라우저와 서버가
3-way Handshake를 나눈다. - 브라우저가 서버에게
HTTP Request를 보내면, 서버는 브라우저에게HTTP Response를 보낸다. - 서버로부터 받은 데이터의 HTML을
Parsing하여Dom Tree를 생성한다.- 이 때
<style>태그를 만나면HTML Parsing을 중단하고CSS Parsing하여CSSOM Tree를 생성한다. <script>태그를 만나면HTML Parsing을 중단하고 자바스크립트 엔진에게 권한을 넘겨Script Parsing하고,Abstract Syntax Tree(AST)를 생성한다.
- 이 때
Dom Tree와CSSOM Tree를 합쳐Render Tree를 생성한다.- 여기까지의 과정을
Construction이라고 한다. - Layout 작업을 실행한다. 렌더링 엔진은
Render Tree에 있는 노드를 화면에 배치한다. - Paint 작업을 실행한다.
Render Tree에 있는 노드의 UI를 그린다. - Composition 작업을 실행한다. 노드들의 레이어를
z-index에 맞게 순서대로 구성한다. - 여기까지의 과정을
Operation이라고 한다. - 최종적으로 브라우저는 사용자에게 결과 화면을 출력한다.
