[JS] 브라우저의 동작 원리

일러두기

• 본 글은 ‘모던 자바스크립트 Deep Dive’ 38장, ‘브라우저의 렌더링 과정’을 참고하여 작성되었습니다.
• 글에 틀린 점이 있다면 댓글로 피드백 부탁드립니다 :)

브라우저의 동작 과정 개요

위 그림은 브라우저의 동작 원리를 나타낸 도식이다.
클라이언트와 서버가 http 프로토콜 (통신 규약)으로 요청과 응답을 주고 받고 있고,
브라우저의 두 엔진 rendering engine과 javascript engine은 요청을 통해 응답받은 html/css/js 파일들을 parsing하고 있다.
각 파일의 parsing 결과로는 세 가지 종류의 Tree가 생성된다.

• HTML → DOM Tree
• CSS → CSSOM Tree
• JS → Abstract Syntax Tree

그리고 생성된 DOM, CSSOM Tree로는 Render Tree가 제작되고, 브라우저는 이 최종 제작된 Render Tree로 각 픽셀을 렌더링하는 painting 과정을 진행하게 된다.

다시 정리하자면,

1. 브라우저는 HTML, CSS, JS, img, font 등 렌더링에 필요한 리소스를 요청하고 응답받는다.
2. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다.
3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 Abstract Syntax Tree를 생성하고 바이트코드로 변환하여 실행한다. 이 때 JS는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있다. 이 과정에서 변경된 DOM과 CSSOM은 다시 결합하여 새로운 렌더트리를 형성한다.

각 과정에 대해 조금 더 구체적으로 알아보자!

요청과 응답

• 브라우저가 동작하기 위한 첫번째 과정은 브라우저가 서버로 브라우저 구성에 필요한 리소스들을 요청하는 일이었다.
• 이 때 브라우저와 서버간의 요청과 응답을 처리하기 위한 통신 규약을 HTTP라고 한다.
• HTTP 프로토콜에 따라 작성된 요청은 다음과 같다. 출처: https://velog.io/@jch9537/URI-URL
  우리가 아는 페이지의 주소가 바로 서버로 리소스를 요청하는 명령인 것이다!
  
• http 규약에 맞는 주소를 작성해 주소창에서 엔터를 치면,
  1. URL의 호스트명 → IP 변환 (DNS)
  2. 해당 IP를 갖는 서버에게 요청을 전송
  의 과정을 거쳐 서버로 요청을 전송한다.
  
• 우리가 http://google.com 을 주소창에 치면 일어나는 일은? 우리가 위 주소를 주소창에 입력한 후 엔터를 치는 행위는 이 그림에서 보면 initial request를 통해 구글의 도메인에 응답 요청을 보내는 것이다. 그런데 아래의 요청들과 달리 구체적으로 어떤 리소스를 요청할 것인지에 대한 명시가 없다. 이 때 서버는 자동으로 index.html 이라는 html 리소스를 응답한다. 내가 프로젝트를 진행할 때에도 자연스럽게 프로젝트의 메인이 되는 랜딩페이지의 내용은 index.html이라는 파일에 작성했었다. 이는 브라우저와 서버간의 통신의 동작을 고려한 파일명이었던 것!
  

파싱 parsing

• 불러온 html 리소스는 파싱되기 시작한다.
• 파싱이란 의미적으로는 ‘구문 분석’이고, 이는 프로그래밍의 관점에서 언어의 문법에 맞게 작성된 텍스트 문서를 읽어들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정을 말한다.
• html 의 파싱 결과는 DOM tree가 된다.
• index.html의 파싱하다가 css 파일을 불러오는 link 태그를 만나거나, js를 불러오는 script태그를 만나면 index.html의 파싱은 중단되고 각 css, js 파일의 파싱이 시작된다. 파싱은 ‘직렬적으로’ 수행된다. 즉 파싱하는 도로는 1차선뿐..!
  

렌더 트리 생성

• html와 css파일이 모두 파싱되고, 그 결과물인 DOM, CSSOM 트리가 완성되면 브라우저는 렌더링을 위해 렌더트리를 생성한다.
• 이 트리는 화면에 보이는, 정말로 픽셀로 나타내져야할 노드들만을 포함한다는 특징이 있다. 따라서 <meta>, <script>, display:none 속성을 가진 태그 등의 노드들은 렌더트리에 포함되지 않는다.
  
• 이렇게 완성된 렌더트리는 HTML의 각 요소의 레이아웃 (위치와 크기)를 계산하고 화면에 각 픽셀을 렌더링하는 페인팅 과정에 사용된다
• 렌터트리의 구성이 곧 페이지에서 사용자가 보는 화면과 같다. 즉, 사용자가 보는 화면이 달라지는 상황 (js에 의한 노드 추가 및 삭제, 뷰포트 크기 변경, 레이아웃 변경)엔 렌더 트리가 다시 생성되고 레이아웃 계산, 페인팅 과정도 다시 이루어진다. 이 과정을 리렌더링이라 한다.
• 모던 자바스크립트 딥다이브에서는 이 리렌더링 과정을 두고 ‘비용이 많이 드는, 성능에 악영향을 주는’ 작업이라고 서술하고 있다.