브라우저가 HTML로부터 화면을 보여주는 과정

• 렌더러 프로세스는 탭 내부의 일을 관장하며 HTML, CSS, Javascript로 웹 페이지를 제작
• 렌더러 프로세스도 [[ 브라우저 프로세스 ]]와 마찬가지로 여러 스레드를 가짐
• 대표적으로 메인 스레드, 워커 스레드, 컴포지터 스레드, 레스터 스레드가 있음

DOM 생성

• 네비게이션이 커밋되면 메인 스레드는 HTML을 해석하여 DOM을 만들기 시작
• DOM은 트리 구조의 데이터로서 Javascript가 사용할 수 있는 API인 동시에 웹 페이지의 재현이라고 할 수 있음
• 메인 스레드는 외부 리소스를 더 빨리 조달하기 위해 img, link와 같은 태그가 있는지 먼저 확인하고 있다면 네트워크 스레드에 데이터를 먼저 요청
• 메인 스레드는 HTML을 파싱하는 중 script 태그를 만나면 구문 해석을 중단하고 자바스크립트 엔진에게 제어권을 넘겨 자바스크립트 코드가 실행될 수 있도록 함
• 자바스크립트 코드가 모두 실행되고 나면 메인 스레드는 HTML 파싱 재개, 이렇게 하는 이유는 자바스크립트 코드에 의해 DOM이 조작될 수 있기 때문
• 이러한 흐름을 바꾸고 싶다면 async, defer 속성을 사용할 수 있음
• async 속성을 태그에 할당하면 다운로드 중에 병렬적으로 파싱이 가능하고 다운로드가 끝나면 즉시 자바스크립트 코드를 실행함
• defer속성을 태그에 할당하면 HTML 구문 파싱을 모두 끝낸 이후에 자바스크립트 코드를 실행함

스타일 계산

• 메인 스레드는 DOM을 생성하고 난 후 CSS 스타일링을 위한 계산에 돌입
• 각 DOM 노드에 필요한 스타일을 계산
• 계산 결과는 개발자 도구에서 각 요소의 computed 섹션에서 확인 가능
• CSS가 없더라도 브라우저마다 기본 스타일이 있음

레이아웃 트리 생성

• 계산이 모두 끝났다면 각 요소를 어떤 위치에 그려야 할지 정해야 함
• 메인 스레드는 스타일 계산 결과와 DOM을 통해 레이아웃 트리를 생성
• 레이아웃 트리에는 각 요소의 좌표와 크기 정보가 저장
• display: none이면 이 트리에 포함되지 않음

페인트 레코드 생성

• 브라우저는 기본적으로 HTML에 적힌 마크업 순서대로 요소를 그리기 때문에 다른 순서로 그려져야 하는 요소를 식별하기 위해 페인트 레코드를 생성
• z-index를 가진 요소처럼 다른 stacking-context를 갖는 요소들이 해당
• 메인 스레드는 레이아웃 트리를 살펴보고 페인트 레코드를 생성
• 여기에는 어떤 요소가 어떤 위치게 그려져야 하는지 저장

페인팅

• 메인 스레드는 레이아웃 트리를 참고하여 레이어 트리를 생성
• 레이어는 페인팅할 영역을 나누어 놓은 것을 의미
• 페인팅 과정에서 각 레이어에 픽셀을 채우는 래스터라이징 과정을 거치게 됨

컴포지팅

• 과거 크롬은 뷰포트 내부 영역에 맞게 래스터라이징을 했지만 이 방법은 그래픽 요소가 변환되거나 사용자가 페이지를 스크롤할 때마다 래스터 이미지를 새롭게 생성해야 하는 비효율적인 계산과 성능 저하를 초래
• 오늘날의 크롬은 컴포지팅이라는 기법을 사용하여 별도의 스레드인 컴포지트 스레드를 통해 효율적으로 페이지를 구성
• 컴포지트 스레드는 레이어를 타일로 나누고 각 타일을 래스터 스레드로 보냄
• 래스터 스레드는 각 타일에 픽셀을 채움
• 컴포지트 스레드는 뷰포트 영역을 먼저 작업하기 위해 래스터 스레드의 우선순위를 조정하기도 함
• 타일에 픽셀을 모두 채우면 컴포지트 스레드는 각 타일의 위치 정보를 참조하여 컴포지터 프레임을 생성
• 이 프레임을 브라우저 프로세스를 통해 GPU 프로세스로 전송하여 화면에 표시할 수 있도록 함
• 사용자가 화면을 스크롤하면 이미 픽셀로 채워진 레이어를 합성하여 새로운 프레임을 만드는 방식
• 컴포지팅의 이점은 메인 스레드가 필요하지 않다는 점, 레이아웃 트리는 메인 스레드가 만든다는 점을 기억할 것
• 이러한 이유 때문에 CSS에서 컴포지팅 전용 속성을 사용하면 레이아웃, 페인팅 과정을 생략할 수 있어서 성능상 이점이 있음
• 하지만 너무 많은 레이어를 합성하는 것은 디바이스 메모리 성능에 따라 오히려 더 큰 부담이 될 수 있으므로 항상 옳은 것은 아님

참고

• inside-browser