🌐 브라우저는 어떻게 동작하는가?

브라우저(Browser)

• 우리가 인터넷을 접속할 때 사용하는 크롬, 사파리, 파이어폭스, 인터넷 익스플로어 등을 말한다.
• MDN 정의 : 웹에서 페이지를 찾아 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램
• 브라우저는 사용자가 요청한 자원을 서버로부터 받아와서 보여준다. 페이지, 이미지, 비디오 등 컨텐츠도 포함하여 받아온 자원은 렌더링 과정을 통해 사용자에게 보여준다.

브라우저 주소창에 www.google.com을 입력하면?

탐색(Navigation)

• 사용자가 주소창에 URL을 입력하거나, 링크를 클릭하고, 폼(form)을 제출하는 등의 동작을 통해 요청을 보낼 때마다 발생
• 탐색은 웹 페이지를 로딩하는 첫 단계이다.

DNS(Domain Name System) 조회

• 탐색의 첫 단계는 해당 페이지의 자원이 어디에 위치하는지 찾는 것이다.
• DNS 서버에 검색하기 전에 캐싱된 DNS 기록을 먼저 확인
  • 만약 해당 도메인 이름에 맞는 IP 주소가 존재한다면, DNS 서버에 IP 주소를 요청하지 않고 캐싱된 IP 주소를 반환
  • 만약 www.google.com에 한 번도 방문한 적이 없다면, DNS 브라우저는 DNS 서버에 해당 사이트의 IP 주소를 요청하여 응답받는다.
  • IP 주소는 일정 기간 동안 캐시되어 후속 요청 속도를 높인다.

TCP Handshake

• IP를 응답받은 후, 브라우저는 서버와 TCP 3 Way Handshake를 통해 연결을 설정

TCP(Transmittion Control Protocol)

• 인터넷에 연결된 컴퓨터에서 실행되는 프로그램 간의 통신을 안정적으로, 순서대로, 에러없이 교환할 수 있게 한다.
• TCP는 UDP보다 안전하지만 느리다.

3 Way Handshake

TCP를 이용한 데이터 통신을 할 때 프로세스와 프로세스를 연결하기 위해 가장 먼저 수행되는 과정으로 연결하고자 하는 두 장치 간의 논리적 접속을 성립하기 위해 사용하는 연결 확인 방식

1. 클라이언트가 서버에게 요청 패킷을 보냄
2. 서버가 클라이언트의 요청을 받아들이는 패킷을 보냄
3. 클라이언트는 이를 최종적으로 수락하는 패킷을 보냄

응답(Response)

• 웹 서버와 연결이 성립되면 브라우저는 HTTP Request를 보낸다.
• 웹 사이트는 대게 HTML 파일을 요청
• 서버가 요청을 받으면, 관련 응답 헤더와 함께 HTML의 내용을 응답(HTTP Response)

구문 분석(Parsing)

• 브라우저는 수신된 정보를 구문 분석을 하기 시작
• 구문 분석은 브라우저가 네트워크를 통해 받은 데이터를 DOM이나 CSSOM으로 바꾸는 단계로, 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미
• 파싱 결과는 보통 문자 구조를 나타내는 노드 트리인데 파싱 트리(parse tree) 또는 문법 트리(syntax tree)라고 부른다.
• 이는 렌더러가 화면에 페이지를 그리는 데 사용된다.
• 렌더링(rendering) : HTML, CSS, JavaScript로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 의미

HTML 파싱과 DOM 생성

• 브라우저의 요청에 의해 서버가 응답한 HTML 문서는 문자열로 이루어진 순수한 텍스트
• 브라우저에 렌더링 하기 위해 HTML 문서를 브라우저가 이해할 수 있는 자료구조(객체)로 변환하여 메모리에 저장
• 브라우저의 렌더링 엔진은 응답받은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM(Document Object Model)을 생성

DOM 트리 생성 과정

• 브라우저는 바이트 형태의 HTML 문서를 응답받는다.
• 응답된 바이트 형태의 HTML 문서는 meta 태그의 charset 어트리뷰트에 의해 지정된 인코딩 방식(예: UTF-8)을 기준으로 문자열로 변환
• 문자열로 변환된 HTML 문서를 문법적 의미를 갖는 코드의 최소 단위인 토큰(token)들로 분해
• 각 토큰들을 객체로 변환하여 노드들을 생성하고 이 노드는 DOM을 구성하는 기본 요소가 된다.
• HTML 요소 간의 부자 관계(중첩 관계)를 반영하여 모든 노드들을 트리 자료구조로 구성하여 DOM 트리를 생성한다.

CSS 파싱과 CSSOM 생성

• 렌더링 엔진은 HTML을 처음부터 한 줄씩 순차적으로 파싱하여 DOM을 생성하다가 CSS를 로드하는 link 태그나 style 태그를 만나면 DOM 생성을 일시 중단
• link 태그의 href 어트리뷰트에 지정된 CSS 파일이나 style 태그 내의 CSS를 HTML과 동일한 파싱 과정을 거쳐 CSSOM(CSS Object Model)을 생성
  • 바이트 ➞ 문자 ➞ 토큰 ➞ 노드 ➞ CSSOM
• CSS 파싱이 완료되면 HTML 파싱이 중단된 지점부터 다시 HTML 파싱 시작하여 DOM 생성 재개

JavaScript 파싱과 실행

• DOM은 HTML 요소와 스타일을 변경할 수 있는 프로그래밍 인터페이스로 DOM API를 제공하고, 이를 통해 이미 생성된 DOM을 동적으로 조작할 수 있다.
• 렌더링 엔진은 HTML을 처음부터 한 줄씩 순차적으로 파싱하여 DOM을 생성하다가 script 태그를 만나면 DOM 생성을 일시 중단
• script 태그의 src 어트리뷰트에 지정된 JavaScript 파일이나 script 태그 내의 JavaScript 코드를 파싱하기 위해 JavaScript 엔진에게 제어권을 넘긴다.
• 렌더링 엔진으로부터 제어권을 넘겨받은 JavaScript 엔진은 JavaScript 코드를 파싱하여 추상적 구문 트리(AST, Abstract Syntax Tree)를 생성하고 이를 바이트코드로 변환하여 실행
• JavaScript 파싱과 실행이 종료되면 렌더링 엔진으로 다시 제어권을 넘겨 HTML 파싱이 중단된 지점부터 다시 HTML 파싱 시작하여 DOM 생성 재개

렌더(Render)

• 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 각각 DOM과 CSSOM를 생성하고, DOM과 CSSOM은 렌더링을 위해 렌더 트리(render tree)를 생성

스타일(Style)

• 계산된 스타일 트리(=렌더 트리)는 DOM 트리의 루트부터 시작하여 눈에 보이는 노드를 순회하며 생성

렌더 트리

• 렌더링을 위한 트리 구조의 자료구조
• 렌더 트리는 실제 브라우저 화면상 공간을 차지하여 표현되는 노드만으로 구성된다.
  • 브라우저 화면에 렌더링되지 않는 노드 제외(예: meta 태그, script 태그)
  • CSS에 의해 비표시 되는 노드 제외 (예: display: none;)
  • visibility : hidden; 속성은 화면상 공간을 차지하므로 렌더 트리에 반영
• 렌더 트리의 모든 노드는 계산된 스타일을 가지고 있다.
  • DOM 트리에서 보이는 모든 노드에 관련되 스타일을 맞춰보고, CSS 캐스케이드 방식에 따라 각 노드에 계산된 스타일을 결정

레이아웃(Layout)

• 렌더 트리에 있는 모든 노드의 너비, 높이, 위치를 결정하는 프로세스
• 렌더 트리가 한 번 만들어지고 나면, 레이아웃이 시작된다.
• 렌더트리는 계산된 스타일과 함께 어떤 노드가 화면에 표시될 지 식별하고, 브라우저는 렌더 트리의 루트부터 순회하면서 각 객체의 정확한 크기와 위치를 결정한다.
• 처음 노드의 크기의 위치가 결정되는 것을 레이아웃이라고 부르고, 이후 노드의 크기와 위치를 다시 계산하는 것을 리플로우라고 부른다.

페인트(Paint)

• 페인트팅은 브라우저가 레이아웃 단계에서 계산된 렌더 트리의 각 노드를 실제 화면의 픽셀로 변환하는 단계
• 텍스트, 색깔, 경계, 그림자 및 버튼이나 이미지 같은 대체 요소를 포함하여 모든 요소의 시각적인 부분을 화면에 그리는 작업
• 페인팅은 레이아웃 트리의 요소를 레이어로 분리할 수 있다.

Layer model

• 웹 페이지를 렌더링하기 위해 필요한 이미지 단위 요소
• 레이어들을 배치,합성하여 최종적인 웹 페이지를 표현
• 페인트 단계에서 메인 스레드는 하나의 페이지를 여러 층의 레이어로 분리하고 그 레이어들을 어떤 순서로 그릴지 결정
• 이 과정에서 레이아웃 트리를 기반으로 레이어 트리가 생성되어 시각적인 부분을 그리기 위해 각 레이어에 픽셀을 채운다.
• Layer 분류
  • Paint Layer(Render Layer) : 브라우저 렌더링 과정에서 생성되는 렌더 트리를 이용하여 레이아웃 객체들을 화면에 보다 효율적으로 요소들을 뿌려주기 위해 레이어 형태로 구성된 것
  • Graphics Layer : Paint Layer에서 실제 화면에 띄워지는 요소들의 출력을 GPU에게 위임하기 위해 생성된 레이어로 GPU가 Graphics Layer를 묶어 하나의 이미지로 만들어 내는 것을 하드웨어 가속/GPU 가속이라고 표현한다.
    • Graphics Layer에 위치한 요소들은 CPU가 아닌 GPU가 처리
    • GPU는 CPU에 비해서 그래픽 처리 속도가 빠르고 애니메이션에 대한 비용이 적어 성능에 유리하다.
• 레이어는 성능을 향상시키지만 메모리 관리 측면에서는 비용이 비싼 작업이다.

합성(Compositiong)

• 페인트 단계에서 생성된 레이어를 합성하여 실제 화면에 나타낸다.
• 이 과정이 끝나면 브라우저 화면에서 웹 페이지를 볼 수 있다.

Reflow / Repaint

• 브라우저 동작 과정 중 스타일 이후의 과정(스타일 ⇒ 레이아웃 ⇒ 페인트 ⇒ 합성)을 렌더링이라고 하는데, 이 렌더링 과정은 상황에 따라 반복하여 발생할 수 있다.
• 스타일 단계에서 구성되는 렌더 트리는 JavaScript에 의해 DOM 트리, CSSOM 트리가 변경될 때 다시 재구성된다.
  • DOM 노드의 추가/삭제할 경우
  • 요소에 기하적인 영향(높이, 넓이, 위치)을 주는 CSS 속성값을 변경하는 경우

Reflow

• 처음 노드의 크기와 위치가 결정되는 것을 레이아웃 이후 노드의 크기와 위치를 다시 계산하는 것
• 레이아웃부터 이후 과정을 다시 수행한는 것
• 요소에 기하적인 영향을 주는 CSS 속성값 : height, width, left, top, font-size, line-height 등

Repaint

• 요소에 기하적인 영향을 주지 않는 CSS 속성값을 변경하면 리플로우가 발생하지 않는다.
• 페인트부터 이후 과정을 수행하는 것
• 요소에 기하적인 영향을 주지 않는 CSS 속성값 : background-color, color, visibility, text-decoration 등
• 리플로우는 전체 픽셀을 다시 계산해야 하므로 부하가 크지만, 리페인트는 이미 계산된 픽셀값을 이용해 화면을 그리기 떄문에 리플로우에 비해 부하가 적다.
• 리플로우가 발생하면 리페인트도 함께 발생

Reflow와 Repaint의 차이

• Reflow는 요소의 크기나 위치의 픽셀이 변경되는 경우 값을 다시 계산해야할 때 발생
• Repaint는 픽셀 값을 계산하지 않는 CSS 속성값이 변경되는 경우

참고

• 웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가 - MDN
• 내 화면에 네이버가 켜질 때까지 - 브라우저 렌더링 과정
• 브라우저는 어떻게 동작하는가? - Naver D2
• 브라우저 렌더링 과정 이해하기
• 성능 최적화 - TOAST UI
• 브라우저 렌더링 최적화
• 브라우저의 Layer Model과 하드웨어 가속을 이용한 렌더링 최적화에 대해 알아보자!
• 브라우저의 렌더링 순서
• 모던 자바스크립트 Deep Dive - 38장 브라우저의 렌더링 과정