브라우저의 랜더링 과정

서론

Node.js

: 구글의 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경

Node.js의 등장으로 자바스크립트는 서버 사이드 애플리케이션 개발에서도 사용할 수 있게 되었다.

그래도 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹페이지/애플리케이션의 클라이언트 사이드다.

대부분의 프로그래밍 언어 - 운영체제나 가상머신 위에서 실행된다.
자바스크립트 - 브라우저에서 HTML, CSS와 함께 실행된다.

그렇다면 어떻게 브라우저는 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 파싱(해석)하여 브라우저에 랜더링할까?

브라우저 랜더링 과정

1. 브라우저는 HTML, CSS, 자바스크립트 파일 등 랜더링에 필요한 리소스를 서버에 request하고 response 받는다.
   여기서, 클라이언트: 브라우저 (ex. Chrome) / 서버 (ex.Node.js)

2. HTML, CSS

   1. 랜더링 엔진은 서버로부터 받은 HTML, CSS를 파싱하여 DOM과 CSSOM을 생성 → 이들을 결합해 랜더 트리 생성
      

3. 자바스크립트

   1. 자바스크립트 엔진은 서버로부터 받은 자바스크립트를 파싱하여 AST 생성 → 바이트코드로 변환하여 실행
   2. 자바스크립트는 DOM API를 통해 DOM이나 CSSOM 변경 가능
   3. 변경된 DOM이나 CSSOM은 다시 랜더 트리로 결합됨.

4. 랜더 트리를 기반으로 HTML 요소의 레이아웃을 계산하고 브라우저 화면에 페인팅한다.

01. 요청과 응답

브라우저의 핵심기능은 필요한 리소스를 서버에 request하고 response 받아 브라우저에 시각적으로 랜더링하는 것이다.
이 말은 즉슨, 서버에 필요한 리소스가 모두 존재해야 가능하다는 것이다.

여기서 필요한 리소스 종류가 될 수 있는 것들

• HTML, CSS, 자바스크립트, 이미지, 폰트 등의 정적 파일
• 서버가 동적으로 생성한 데이터

서버에 요청하기 위해 브라우저는 주소창을 제공한다.

1. 브라우저의 주소창에 URL을 입력하고 엔터 키를 누르면
2. URL의 호스트 이름이 DNS를 통해 IP 주소로 변환되고
3. 이 IP 주소를 갖는 서버에게 요청을 전송한다.
   • 서버는 루트 요청(ex. https://naver.com)에 대해 암묵적으로 index.html을 응답하도록 기본 설정되어 있다.
   • index.html을 파싱하는 도중 CSS 파일이나 자바스크립트 등 외부 리소스를 로드하는 태그를 만나면 파싱을 일시 중단하고 해당 리소스 파일을 서버로 요청한다.

더 자세한 내용은 아래 링크를 통해 알아볼 수 있다.
https://velog.io/@julianneyi/Domain-DNS-그리고-호스팅

반드시 브라우저의 주소창을 통해서만 필요한 리소스를 서버에 요청할 수 있는 것은 아니다.
⇒ 자바스크립트를 통해 동적으로 서버에 정적/동적 데이터를 요청할 수도 있다. (ajax or REST API)

02. HTTP 1.1과 HTTP 2.0

HTTP/1.1

• 기본적으로 커넥션 당 하나의 요청과 응답만 처리한다. = CSS 파일을 로드하는 태그, 이미지 파일을 로드하는 태그 등에 의한 리소스 요청이 개별적으로 진행된다. = 요청할 리소스의 개수에 비례하여 응답 시간도 증가하는 단점이 있다.
  

HTTP/2.0

• 커넥션 당 여러 개의 요청과 응답, 즉 다중 요청/응답이 가능하다.
• HTTP/1.1에 비해 페이지 로드 속도가 약 50% 정도 빠르다고 알려져 있다.

03. HTML 파싱과 DOM 생성

브라우저의 랜더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다.
즉, DOM은 HTML 문서를 파싱한 결과물이다.

04. CSS 파싱과 CSSOM 생성

랜더링 엔진은 DOM을 순차적으로 생성해 나가다가 CSS를 로드하는 link 태그나 style 태그를 만나면 DOM 생성을 일시 중단한다.

그리고 HTML과 동일한 파싱 과정(바이트 → 문자 → 토큰 → 노드)을 거치며 해석하여 CSSOM을 생성한다.

05. 랜더 트리 생성

랜더링 엔진은 DOM과 CSSOM(3, 4번 과정을 거쳐 만들어진)을 조합해 랜더 트리를 만든다.

랜더 트리는 브라우저 화면에 랜더링되는 노드만으로 구성된다.
= meta 태그, script 태그 노드들은 포함하지 X

참고자료

Book) 모던 자바스크립트 Deep Dive
https://codingsalon.tistory.com/123