렌더링 엔진은 요청받은 내용을 브라우저 화면에 표시하며, HTML 및 XML 문서와 이미지를 표시할 수 있다.
렌더링 엔진은 위와 같은 과정으로 동작한다.
그럼 위의 렌더러 프로세스에 대해 더 자세하게 알아보도록 하자!
렌더러 프로세스는 브라우저 탭 안에서 일어나는 모든 일을 담당하고, 이 렌더러 프로세스 안에 있는 메인 스레드가 구현한 대부분의 코드를 처리한다. (웹 워커/서비스 워커를 사용할 경우, 워커 스레드가 자바스크립트 일부분을 처리한다.) 컴포지터와 레지스터 스레드 또한 렌더러 프로세스 내부에서 실행된다.
우선 파싱 단계는 DOM을 생성하고, 추가 리소스를 로딩하는 단계로 이루어진다. 그 후 추가 리소스(css, js..)를 로딩한다.
그 다음 CSS를 파싱하여 각 dom 노드에 대한 계산된 스타일을 결정한다.
이제 렌더러 프로세스가 문서 구조와 노드에 대한 스타일을 알게 되었고, 레이아웃 트리를 생성한다.
그 후 메인 스레드는 레이아웃 트리를 따라가 페인트 기록을 생성한다.
이런 렌더링 파이프라인을 이해할 때 중요한 점은, 각 단계에서 그 전 단계 실행 결과물이 새로운 데이터를 생성하는 데 쓰인다는 점이다! 따라서 레이아웃 트리에서 무언가 변한다면, 영향받은 부분에 대하여 페인트하는 순서가 갱신되어야 한다.
만약 애니메이션을 렌더링할 경우에 브라우저는 이러한 과정을 매 프레임마다 실행해야 한다. 그런데 중간 애니메이션이 손실되거나, 중간에 어떤 과정이 끼어들어 올 경우에는 페이지가 버벅이게 된다. (이를 방지하기 위해 requestAnimationFrame을 이용하여 매 프레임마다 작게 쪼갠 js를 미리 실행하도록 설정할 수 있다)
그 후 이제 문서 구조, 스타일, 기하학적 속성, 페인트 순서를 안 후 이 정보를 화면의 픽셀로 변환하여 웹 페이지를 그리는 동작이 이루어진다. 이 작업을 래스터화라고 한다.
최신 브라우저는 이 래스터링을 좀 더 심화시켜 컴포지팅이라는 방식으로 화면을 그린다.
컴포지팅이란, 한 페이지의 부분들을 여러 레이어로 나누고 그 것들을 각각 래스터하여 컴포지터 스레드에서 페이지를 합성하는 기술이다. 이 레이어를 판단하기 위해 메인 스레드는 레이아웃 트리를 순회하여 레이어 트리를 생성한다.
레이어 트리가 생성되고 페인트 순서가 결정되고 나면, 메인 스레드는 컴포지터 스레드에게 정보를 커밋한다. 그러면 컴포지터 스레드가 각 레이어를 래스터라이즈하고, 컴포지터 스레드는 레이어들을 여러 타일로 쪼개고 각 타일을 다수의 레스터 스레드에 보낸다. 레스터 스레드는 각 타일을 레스터라이드하고 GPU 메모리에 저장한다. 타일들이 레스터되면, 컴포지터 스레드는 쿼드 군집이라 하는 타일 정보를 모아 컴포지터 프레임을 생성한다. 생성된 컴포지터 프레임은 프로세스 간 통신을 통하여 브라우저 프로세스에 넘어간다.
컴포지팅은 메인 스레드의 개입 없이 수행된다는 장점이 있다! (position, scale, rotation, opacity..)
출처: https://developers.google.com/web/updates/2018/09/inside-browser-part3
https://d2.naver.com/helloworld/5237120
