브라우저의 기능

브라우저의 주요 기능은 사용자가 서버에 요청한 데이터를 받아와 화면 상에 띄워주는 것이다. 자원을 요청하는 방법이 url 입력이다.

브라우저의 구조

1. 사용자 인터페이스

   사용자가 요청한 페이지를 제외한, 기본적으로 브라우저에 탑재되어 있는 UI 요소를 의미한다. 주소창, 이전 페이지, 다음 페이지 이동 버튼 등이 이에 해당한다.

2. 브라우저 엔진

   (1) 사용자 인터페이스 - (3) 렌더링 엔진 사이의 동작을 제어한다.

   브라우저 엔진은 쿠키 등을 저장하는 (7)자료 저장소와 연관돼 있다.

3. 렌더링 엔진

   요청한 데이터를 처리하여 화면에 보여주는 엔진이다.

4. 통신

   HTTP 요청과 같은 네트워크 호출에 사용된다.

5. UI 백엔드

   플랫폼에서 명시하지 않은 인터페이스이다. 사용자 OS 의 인터페이스를 따른다.

6. 자바스크립트 해석기

   자바스크립트 코드를 해석하여 실행한다.

7. 자료 저장소

   데이터를 별도로 보관하는 계층이다. 쿠키 등의 데이터를 하드 디스크에 저장한다.

렌더링 엔진

렌더링 엔진이 어떻게 동작하는가. 즉, 브라우저에서 HTML, CSS, JavaScript 등의 파일을 받아와 어떻게 화면에 컨텐츠를 출력하는가를 설명한다.

각 브라우저는 자체적으로 사용하는 렌더링 엔진이 다 다르다. 사파리와 크롬은 웹킷(Webkit) 엔진을 사용한다.

1. 구문 분석(Parsing)

브라우저가 서버와 통신해서 받은 데이터를 분석하는 단계이다. HTML, CSS 파일 등을 분석하여 각각 DOM 과 CSSOM 트리를 구축하게 된다.

1.DOM 트리 생성

트리는 부모 태그와 자식 태그 간의 관계와 계층을 반영한다. DOM 트리를 생성하는 도중 CSS 파일을 만나더도 계속해서 분석한다.

async 혹은 defer 속성이 부여돼있지 않은 script 태그를 만나게 될 시 파싱을 중단하여 병목현상이 발생할 수 있다. 따라서 자바스크립트는 문서의 끝에 두는 것이 일반적이다.

병목현상이 발생하는 것을 방지하기 위해 프리로드 스캐너로 파싱 속도를 높일 수 있다.

👉🏻 프리로드 스캐너

기본 HTML 파서가 외부 자원을 발견하기 전 프리로드 스캐너라고 불리는 HTML 파서가 먼저 마크업 문서를 읽어 외부에 대한 요청을 미리 처리한다.

2. CSSOM 트리 생성

브라우저가 CSS 파일을 읽어 트리를 만든다. CSS 선택기에 기반하여 부모 노드, 자식 노드, 형제 노드의 관계를 만든다.

CSSOM 트리를 만드는 과정은 매우 빨리 이뤄져서 성능향상에 큰 기여를 하지 못한다.

2. 렌더(Render)

렌더링 과정엔 스타일, 레이아웃, 페인트, 그리고 때때로 합성이 포함된다. 파싱 단계에서 만든 DOM 트리와 CCSOM 트리를 합쳐 Render Tree 를 생성하여 화면에 그리는 단계이다.

1. 스타일

스타일 과정에선 CSS 캐스케이드 방식에 따라 보이는 노드들의 계산된 스타일이 무엇일지 결정한다.
이 과정에서 DOM 트리와 CCSOM 트리를 합쳐 렌더 트리를 생성한다.

2. 레이아웃

렌더 트리에 있는 모든 노드의 너비, 높이, 위치를 결정한다. 레이아웃 단계에서 뷰 포트의 크기를 고려한다.
처음으로 노드의 사이즈와 위치가 결정되는 것을 레이아웃 이라고 하고, 이후 노드의 위치와 크기를 다시 계산하는 것을 리플로우 라고 한다.

3. 페인트

레이아웃 단계에서 결정된 각 노드들을 실제 화면에 픽셀로 변환하여 그린다. 첫 페인팅을 하고 나면 다시 페인팅 하는 작업을 빠르게 처리하기 위해 화면은 몇 단계의 레이어로 구성된다.

페인트 단계에서 메인스레드는 GPU 를 병렬적으로 사용하여 레이어 분할, 레이어 페인트, 레이어 합성과정의 성능을 최적화한다.

레이어는 성능을 향상시키긴 하지만 메모리 측면에선 부담이 가기 때문에 성능화 작업을 위해 과도하게 사용해선 안된다.

4. 합성

문서의 각 부분이 다른 레이어에서 그려질 때, 해당 부분을 합치면서 정확한 렌더링을 보장한다.

3. 추가 보완

Q. HTML 문서 파싱 중 CSS 를 만나면 파싱이 중단되나요?

MDN 에서 브라우저가 CSS 파일을 마주할 경우 파싱을 멈추지 않는다고 적시되어 있다.

Q. 프리로드 스캐너로 외부 자원을 미리 읽으면 병목 현상이 없나요?

프리로드 스캐너는 HTML 문서를 먼저 읽어 외부 요청이 있는 경우, 외부 요청을 미리 비동기적으로 로드한다.

HTML 파일은 HTML 파서, CSS 파일은 CSS 파서, JS 파일은 JS 엔진이 처리하기 때문에 각각의 파일을 병렬적으로 처리할 수 있게 되어 병목현상이 없다.