Inner workings of a Renderer Process

Renderer processes handle web contents

The renderer process is responsible for everything that happens inside of a tab. In a renderer process, the main thread handles most of the code you send to the user.Sometimes parts of your JavaScript is handled by worker threads if you use a web worker or aservice worker. Compositor and raster threads are also run inside of a renderer processes to render a page efficiently and smoothly.

The renderer process's core job is to turn HTML, CSS, and JavaScript into a web page that the user can interact with.

👉 여기서 말하는 process는 메모리에 올라와 실행되고 있는 프로그램의 인스턴스이다.
👉 The renderer processs는 tab안에서 이루어지는 모든 것을 담당한다.

👉 The renderer processs의 주된 역할은 HTML, CSS, and JavaScript을 web page로 바꾸는 것이다.

0. renderer process가 web page를 만드는 과정

1. Parsing

When the renderer process receives a commit message for a navigation and starts to receive HTML data, the main thread begins to parse the text string (HTML) and turn it into a Document Object Model (DOM).
👉 main thread가 HTML을 DOM으로 parse하기 시작한다.
👉 DOM으로 바꾸는 이유는 브라우저가 HTML을 이해하지 못하기 때문에

Subresource loading

If there are things like img or link tag in the HTML document, preload scanner peeks at tokens generated by HTML parser and sends requests to the network thread in the browser process.

👉 img, link와 같은 tag가 있을 경우 preload scanner는 HTML parser에 의해 생성된 토큰을 살펴보고 브라우저 프로세의 network thread에 요청을 보낸다.

JavaScript can block the parsing

When the HTML parser finds a script tag, it pauses the parsing of the HTML document and has to load, parse, and execute the JavaScript code. Why? because JavaScript can change the shape of the document using things like document.write() which changes the entire DOM structure
👉 HTML parser가 script tag를 발견했을 때,HTML document의 parsing 작업을 멈추게 되고 javascript code를 먼저 실행한다.
∵ javascript가 DOM구조를 변경시킬 수 있기 때문

parsing
'파싱'은 문장을 그것을 이루고 있는 구성 성분으로 분해하고 그들 사이의 위계 관계를 분석하여 문장의 구조를 결정하는 것을 말한다.
https://ko.wikipedia.org/wiki/%EA%B5%AC%EB%AC%B8_%EB%B6%84%EC%84%9D

2. Style calculation(CSSOM 생성하기)

The main thread parses CSS and determines the computed style for each DOM node. This is
information about what kind of style is applied to each element based on CSS selectors. You can see this information in the computed section of DevTools.

Even if you do not provide any CSS, each DOM node has a computed style.

👉 main thread가 css를 parse하고 각 DOM의 스타일을 결정.

3. Render Tree로 합치기

DOM과 CSSOM을 합쳐서 Render Tree를 만들면 해석 과정이 끝납니다.
👉 DOM tree + CSSOM tree = Render tree

CSS와 JS는 render-blocking resources라고도 하는데, JS는 DOM의 생성 과정을 늦추고, CSS는 CSSOM이 모두 생성돼야 Render Tree를 만들 수 있기 때문입니다. 게다가 CSSOM 생성은 JS의 실행을 멈추기도 합니다. CSS와 JS 파일이 너무 많거나 크면 Render Tree를 만드는 시점이 지연되어 웹 로딩 시간도 늦어지게 됩니다. 그래서 이러한 render-blocking resources를 최대한 제거하거나 최적화하는 것은 웹 성능을 위해서 중요한 작업입니다.

👉 CSS와 JS는 render-blocking resources라고 함.
👉 따라서 CSS와 JS파일이 너무 클 경우 Render Tree를 만드는 시점이 지연되어 웹 로딩 시간을 늦춤.

4. Layout(Reflow)

The layout is a process to find the geometry of elements. The main thread walks through the DOM and
computed styles and creates the layout tree which has information like x y coordinates and bounding
box sizes. Layout tree may be similar structure to the DOM tree, but it only contains information related to what's visible on the page. If display: none is applied, that element is not part of the layout tree (however, an element with visibility: hidden is in the layout tree). Similarly, if a pseudo class with content like p::before{content:"Hi!"} is applied, it is included in the layout tree even though that is not in the DOM.

👉 main thread가 DOM과 computed style을 확인하고 layout tree를 만듬.
👉 x,y 좌표나 box size같은 정보들을 layout tree가 가지고 있다.
👉 Render Tree는 요소의 스타일을 계산했다면 Layout은 웹 페이지 기준으로 각 요소 위치와 크기를 결정하는 작업입니다.
👉::before와 같은 속성은 dom에 존재하지 않고 layout tree에만 존재.

이 과정이 처음 일어날 때는 Layout이라고 하지만 JS 등에 의해서 재계산이 될 경우 Reflow라고 불리는데요. Reflow가 일어나면 렌더링 파이프라인에서 뒤따르는 Paint와 Composite까지 다시 진행하기 때문에 계산이 가장 많이 드는 작업입니다.

👉 JS에 의하여 이 과정이 다시 실행 될 경우 reflow라고 불림.

5. Paint

Having a DOM, style, and layout is still not enough to render a page. Let's say you are trying to reproduce a painting. You know the size, shape, and location of elements, but you still have to judge in what order you paint them.

For example, z-index might be set for certain elements, in that case painting in order of
elements written in the HTML will result in incorrect rendering.

At this paint step, the main thread walks the layout tree to create paint records. Paint record is a note of painting process like "background first, then text, then rectangle".

👉 main thread가 paint 기록들을 만드는 과정
👉 paint records 어떤 부분 부터 그림을 그릴지 적혀있는 노트이다.

Updating rendering pipeline is costly

if something changes in the layout tree, then the Paint order needs to be regenerated for affected parts of the document.

If you are animating elements, the browser has to run these operations in between every frame. Most of our displays refresh the screen 60 times a second(60 fps)

However, if the animation misses the frames in between, then the page will appear "janky".

👉 애니메이션 요소가 있을 경우 부라우저는 대부분 1초에 60번 프레임을 reflesh한다.
👉 프레임 하나당 style calculation, layout, paint 과정을 다시 실행.

Even if your rendering operations are keeping up with screen refresh, these calculations are
running on the main thread, which means it could be blocked when your application is running
JavaScript.

You can divide JavaScript operation into small chunks and schedule to run at every frame using requestAnimationFrame().

👉 javascript 코드를 만나면 page는 javascript 코드를 먼저 실행하므로 page jank가 발생할 수 있음. 이를 방지하기 위해 requestAnimationFrame()을 사용.

6. Compositing

Compositing is a technique to separate parts of a page into layers, rasterize them separately, and
composite as a page in a separate thread called compositor thread. If scroll happens, since layers are already rasterized, all it has to do is to composite a new frame. Animation can be achieved in the same way by moving layers and composite a new frame.
👉 합성은 페이지의 부분을 계층으로 분리하고 각각을 레스터화한 다음 compositor thread에서 페이지로 합성하는 기술

Dividing into layers
the main thread walks through the layout tree to create the layer tree. If certain parts of a page that should be separate layer (like slide-in side menu) is not getting one, then you can hint to the browser by using will-change attribute in CSS.
👉 layer tree를 만들기 위해서 메인 쓰레드가 layout tree를 탐색한다.
👉 will-change라는 CSS속성을 줘서 layer를 하나 더 만들 수 있다.

rasterizing 이란?
Turning this information into pixels on the screen is called rasterizing.

출처:
https://developer.chrome.com/blog/inside-browser-part3/
https://blog.imqa.io/webpage_loading_process/