Critical rendering path (google.com 입력했을 때 일어나는 일)

 

💡️ Client-side programming

대부분의 프로그래밍 언어는 OS나 VM 위에서 실행되지만, 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능해진다.

이를 위해 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱하여 브라우저에 렌더링하는지 공부해야 할 필요가 있다.

 

🕵️ 브라우저 주소창에 google.com 을 입력한 뒤 엔터 키를 누르면 일어나는 일

 

1. request/response

• google.com라는 도메인 이름을 DNS 서버로 요청하고, DNS 서버에서 IP 주소를 브라우저로 전달한다.
• 전달받은 IP 주소로 google.com서버에 루트 요청(/)이 전송된다.
  (특정 리소스가 요청되지 않으면 암묵적으로 index.html을 응답)
• 서버는 루트 요청에 대해 서버의 루트 폴더에 존재하는 정적 파일 index.html 을 클라이언트(브라우저)로 응답한다.
• index.html 파일 안에서 링크된 필요한 리소스(HTML, CSS, 자바스크립트, 이미지, 폰트 등)를 순차적으로 서버에서 받아온다.

 

2. Parsing & Scripting (HTML, CSS, JavsScript)

HTML

• 브라우저의 렌더링 엔진은 응답받은 HTML문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM(Document Object Model)을 생성한다.
• HTML문서는 HTML요소들의 집합으로 이루어지며 HTML요소는 중첩관계를 갖는다. HTML요소 간의 부자관계를 반영하여 모든 노드들을 트리자료 구조로 구성한 것이 DOM 이다.

CSS

• 렌더링 엔진이 HTML을 한 줄씩 순차적으로 파싱하여 DOM을 생성하는데, 이 때 CSS를 로드하는 link 태그나 style 태그를 만나면 DOM 생성을 일시 중단하고 HTML과 동일한 파싱과정(바이트 ➔ 문자 ➔ 토큰 ➔ 노드 ➔ CSSOM)을 거치면서 CSSOM(CSS Object Model) 을 생성한다.
• 이후 CSS 파싱이 완료되면 HTML 파싱이 중단된 지점부터 다시 HTML을 파싱하기 시작하여 DOM 생성을 재개한다.

JavaScript

• 브라우저 렌더링 엔진은 자바스크립트 파일을 로드하는 태그를 만나면 DOM 생성을 일시 중단하고 자바스크립트 파일/코드를 파싱하기 위해 자바스크립트 엔진에 제어권을 넘긴다.
• 자바스크립트 엔진은 자바스크립트 코드를 파싱하고 해석하여 AST(Abstract Syntax Tree, 추상적 구문 트리) 를 생성한다. 그리고 AST 를 기반으로 인터프리터가 실행할 수 있는 중간 코드인 바이트 코드를 생성하여 실행한다.

 

3. Rendering (render tree)

• DOM과 CSSOM은 렌더링을 위해 렌더 트리(render tree)로 결합된다.
• 렌더 트리는 브라우저에 표기될 요소(노드)만으로 구성된다.

👉️ 쓸데없는 태그들이 줄어들수록 빠르게 랜더링 된다.

 

4. Layout & Painting

Layout

• 완성된 렌더 트리는 각 요소들의 위치와 크기를 계산한다. (레이아웃 구상)

Painting

• 레이어별로 나눠서 브라우저 화면에 픽셀을 렌더링

👉️ 렌더 트리를 이용해서 브라우저 window에 표시할 요소의 위치, 크기 등을 계산하고 실제로 브라우저에 그림을 그린다.

 

✔️ 개념 및 용어

✅️ HTTP 1.1과 HTTP 2.0

HTTP(HyperText Transfer Protocol) 은 웹에서 브라우저와 서버가 통신하기 위한 프로토콜이다.

HTTP1.1

• 커넥션당 하나의 요청과 응답만 처리한다.
  따라서 HTML 문서 내에 포함된 여러 개의 리소스 요청이 개별적으로 전송되고 응답 또한 개별적으로 전송된다.
• 리소스의 동시전송이 불가능한 구조이므로 요청할 리소스의 개수에 비례하여 응답 시간도 증가하는 단점이 있다.

HTTP2.0

• 커넥션당 여러개의 요청과 응답이 가능하다. (다중 요청/응답)
• 여러 리소스의 동시 전송이 가능하므로 HTTP1.1에 비해 페이지 로드 속도가 약 50% 정도 빠르다.

✅️ Hosting (호스팅, Web hosting service)

• 인터넷에 띄운다는 것을 홈페이지의 구성파일들이(html, css, js) 인터넷에 "항상" 연결되고, "절대" 꺼지지 않는 호스트 컴퓨터(웹 서버)에 저장되어 있다가 사용자의 요청이 오면 언제든 응답.

서비스 예) AWS EC2/S3, cafe24 호스팅 센터 등

✅️ IP (Internet protocol)

• IP 주소는 internet 으로 통신하는 각 device(컴퓨터, 통신장비)에 부여된 고유의 값.
• IP를 사용하여 서로를 찾고 통신하며, 이러한 숫자를 IP 주소라고 한다.

✅️ Domain (Domain name)

• 문자로 된 고유 주소. 수많은 IP 주소를 사람이 외워서 접속할 수 없기 때문에 기억하기 쉽도록 만든 주소.

✅️ DNS (Domain Name System)

• 사람이 읽을 수 있는 도메인 이름을 머신이 읽을 수 있는 IP 주소로 변환.
• DNS는 이름과 숫자 간의 매핑을 관리하여 마치 전화번호부와 같은 기능을 한다.

*DNS 서버: 도메인과 서버를 연결해주는 중간 서버로, 도메인 이름을 인터넷상의 주소(IP 주소)로 변환시켜 원하는 컴퓨터를 찾아갈 수 있도록 한다.

 

참고 사이트

poiemaweb.com