2023-02-21

브라우저 렌더링 과정

브라우저의 구성 요소와 렌더링 과정을 자세히 알아보자!

브라우저

브라우저의 본질은 서버에서 전달받은 자원(HTML, CSS, JS)를 사용해, 웹 페이지를 렌더링하는 것이다.

구성 요소

• 사용자 인터페이스: 브라우저는 사용자가 기능을 상호작용할 수 있는 인터페이스를 제공한다.
  예로 뒤로가기, 앞으로가기, 새로고침 등
• 렌더링 엔진: HTML을 해석해 DOM을 형성하고, CSS를 해석해 CSSOM을 형성 한 후,
  두 트리를 결합해 렌터 트리를 형성한다.
  브라우저마다 다른 엔진을 사용하는데 크롬은 Blink, 사파리는 Webkit 등이 있다.
• 자바스크립트 엔진: 자바스크립트 코드를 해석하고 실행하는 역할을 담당하며 런타임 환경을 제공한다.
  대표적으로 V8 엔진이 있다.
  • 가비지 컬렉터(Garbage Collector): 자바스크립트는 수동적으로 메모리 해제를 할 수 없기 때문에,
    가비지 컬렉터가 필요하지 않은 메모리를 해제해 누수를 방지한다.
  • 인터프리터와 JIT 컴파일러: 인터프리터는 자바스크립트 코드를 한 줄씩 해석하여 실행한다.
    자바스크립트 엔진은 일반적으로 인터프리터와 JIT(Just-In-Time) 컴파일러의 조합을 사용한다.
    JIT 컴파일러는 더 빠른 성능을 위해 자주 실행되는 코드를 네이티브 머신 코드로 컴파일한다.
    이렇게 컴파일된 코드는 직접 실행되며, 인터프리터보다 더 빠른 실행 속도를 제공한다.
  • 빌트인 객체, 콜 스택, 힙 등의 구성 요소.
• 저장소(스토리지):
  • 쿠키: 작은 텍스트 파일로 여러 가지 정보를 저장할 수 있으며 일반적으로 4KB 크기를 갖는다.
    쿠키는 만기(expire)에 대한 정보를 제공해, 영구적이거나 세션이 존재하는 쿠키로 만들 수 있다.
  • 로컬 스토리지:key-value 로 정보를 저장할 수 있는 영역으로 일반적으로 10MB 크기를 갖는다.
    로컬 스토리지에 저장된 정보는 삭제가 될 때까지 영구적으로 남아있다.
  • 세션 스토리지: 로컬 스토리지와 유사하지만 브라우저가 종료되면 모든 정보가 사라지는 특징이 있다.

HTML 파싱 및 DOM 생성 과정

1. 서버로부터 HTML 문서를 이진수 형태로 응답받고, 인코딩 형식에 따라 문자열로 변환한다.
2. 변환된 문자열을 토큰화를 통해 최소 단위인 토큰으로 분해한다.
   토큰은 태그, 텍스트, 주석 등과 같은 HTML 문법의 작은 조각을 의미한다.
   토큰은 아래와 같이 생겼다.

{
	startTag: 'html',
	content: {...},
	endTag: 'html',
}

1. 토큰을 사용해 DOM 노드(객체)로 변환하는 토큰 파싱 과정을 거친다.
   이 과정에서 각 노드는 부모 자식 관계를 형성한다.
2. 파싱된 DOM 노드들을 연결하여 DOM 트리를 구성한다.

CSS 파싱 및 CSSOM 생성 과정 또한 위와 같이 비슷하게 동작한다.

자바스크립트 파싱 과정

브라우저는 DOM을 생성하다 스크립트를 만나면 제어권을 자바스크립트 엔진에 넘기고,
엔진은 해당 스크립트 코드를 파싱하여 AST(Abstract Syntax Tree)를 생성한다.
AST는 인터프리터나 JIT 컴파일러에 의해 실행된다.
브라우저는 스크립트를 만나면 제어권을 넘겨 DOM 형성이 지연될 수 있기 때문에,
바디 요소 아래에 위치하는 방법을 사용하거나 스크립트 태그에 async, defer 속성을 사용한다.

• async: 비동기적으로 DOM 형성과 동시에 스크립트 파일을 로드하고, 로드가 완료되면 스크립트를 실행한다.
• defer: DOM 형성과 동시에 스크립트 파일을 로드하고 DOM 파싱이 끝난 직후에 스크립트를 수행한다.

리플로우와 리페인트

리플로우는 노드 추가 삭제, 요소 크기 위치 변경 등 레이아웃 계산을 다시 하는 것을 말한다.
리페인트는 리플로우로 재결합된 렌더 트리를 기반으로 다시 렌더링하는 것을 말한다.
레이아웃에 변경이 없는 경우 리페인트만 실행된다.

큰 틀에서 보는 브라우저 동작 과정

우리가 어떤 웹 서버에 접속해 자원을 얻으려면 서버에 접속하기 위한 IP가 필요하다.
이를 얻기 위해 해당 도메인 주소로 매핑된 주소가 있는지,
로컬 hosts 파일과 DNS Cache를 확인하는 과정을 먼저 밟는다.
이 과정에서 캐싱이 미스되면 DNS에 요청하게 되는데,
보통 ISP에서 제공한 로컬 DNS로 하며 설정으로 공유기를 통한 DNS 요청도 가능하다.
만약 해당 도메인에 대해 기업이 CDN 또는 GSLB에 위임한 경우, DNS에서 해당 IP를 제공한다.
이렇게 해당 서버 IP를 얻은 후 TCP 통신을 요청하고 3-way-handshake 과정을 통해,
혼잡정책과 윈도우 사이즈 등의 정보를 공유한다.
연결이 성공적으로 이루어지면 서버에 HTTPRequest를 요청하고,
서버는 HTML, CSS, JS, 이미지 등의 자원을 응답한다.
브라우저의 렌더링 엔진은 HTML, CSS를 파싱해 DOM과 CSSOM을 형성하고 이를 조합해 렌더 트리를 생성한다.
이때 스크립트를 만나면 JS 엔진에 제어권을 넘겨 JS 파싱과 실행을 동작하게 한다.

참조

모던 자바스크립트 Deep Dive - 위키북스
널널한 개발자 - 초창기 웹 서비스 구조
널널한 개발자 - 웹 서비스 3대 요소
널널한 개발자 - 웹 브라우저에 URL 입력하면 일어나는 일 - 인프라 위주