1. 파싱

브라우저가 HTML을 파싱하고 읽어들이는 과정

-DOM Tree

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
  </body>
</html>

이런식으로 코드가 해석되는 과정이 파싱이다.

-CSSOM Tree

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }

CSS 코드 역시 해석이된다.

2. 스타일

DOM Tree, CSSOM Tree가 생성되면 스타일을 매칭해주는 과정이 일어난다.
그 후에 렌더 트리가 구성된다.
렌더링 트리에는 body 태그 같은 페이지를 렌더링하는데 필요한 노드만 포함된다.

3. 레이아웃(Reflow)

기기의 뷰포트 내에서 노드의 정확한 위치와 크기를 계산하는 과정이다.
노드의 정확한 위치와 크기를 계산한다.
경우에 따라 Reflow라고도 한다.

4. 페인트(래스터화)

렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하는 마지막 단계
레이아웃이 완료될 때 브라우저가 ‘Paint Setup’ 및 ‘Paint’ 이벤트를 발생시킨다.
background-color, opacity, transform 같은 위치와 관계없는 CSS 속성을 적용한다.

5. 합성(Compositing)

화면에 표시하기 위해 페이지에서 페인트된 부분을 합치는 과정이다.
쉽게 말하면 transform, opacity 등을 사용했을 때 합성 과정을 거친다.

브라우저에서 제일 성능을 많이 잡아먹는건 뭔가요?

브라우저는 렌더링 과정에서 성능을 제일 많이 잡아먹는다. 특히 Reflow가 순간적으로 많이 발생할 경우 치명적이다.

Reflow와 Repaint가 뭔가요?

스타일 → 레이아웃 → 페인트 → 합성의 과정을 렌더링이라고 한다.
렌더링은 상황에 따라 반복하여 발생할 수 있다.
Reflow(=Layout)
- DOM의 추가/삭제
- CSS 속성으로 기하학적(높이/넓이/위치 등) 변화가 일어나는 경우
  - ex) margin, padding, width, height 등
Repaint(=Paint)
- CSS 속성으로 기하학적 변화가 발생하지 않는 경우
  - ex) color, background, transform 등

-출처

https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Virtual-DOM/

저작자표시 (새창열림)