: HTML, CSS, JavaScript 등 개발자가 작성한 문서를 브라우저가 그래픽 형태로 화면에 출력하는 과정
브라우저마다 가지고 있는 렌더링 엔진이 요청 받은 데이터를 화면에 렌더링하는 역할을 담당한다.
사용자가 브라우저를 통해 웹 사이트에 접속하면,
브라우저는 서버로부터 HTML, CSS, JavaScript 등 웹 사이트에 필요한 리소스를 다운받는다.
: 프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석(syntax analysis)하는 단계
일종의 인터프리터, 컴파일러 구성요소 중 하나인 파서(parser)가 파싱을 진행한다.
토큰(token) : 문법적 의미를 갖는 최소 단위로, 토큰에는 시작 태그와 마침 태그, 속성 이름과 값 등이 포함된다.
브라우저가 HTML 문서를 파싱하다가 CSS 스타일을 만나면, HTML 파싱을 중단하고, CSS 파일을 파싱한다.
: HTML 문서의 요소들의 중첩 관계를 기반으로 노드들을 트리 구조로 구성한 것
<html>
<head>
<meta ... />
<link ... />
</head>
<body>
<p>Hello,
<span>web performance</span>
students
</p>
<div>
<img ... />
</div>
</body>
</html>
<link>
나 <style>
태그를 만나면, 잠시 파싱을 멈추고 CSS 파일을 서버로 요청한다. 그러고 CSS 파일을 파싱하여 CSSOM 트리를 만든다.body {
font-size: 16px;
}
p {
font-weight: bold;
}
p span {
display: none;
}
span {
color: red;
}
img {
float: right;
}
: DOM 트리와 CSSOM 트리를 이용해 생성하는, 렌더링을 목적으로 만들어지는 트리
렌더링은 브라우저가 사용자에게 보여줄 화면을 그리는 과정이므로, 보이지 않는 요소들은 이 트리에서 제외된다.
(<head>
, <link>
, <meta>
, display: none
등)
: 렌더 트리를 기반으로 HTML 요소의 위치, 크기를 계산하여 브라우저 화면의 어디에 배치할 것인지 결정하는 과정
px
로 변환된다.: 레이아웃에서 계산한 대로 브라우저 화면의 픽셀을 채워나가는 과정
이렇게 페인팅 과정이 끝나면, 텍스트에 불과했던 HTML 파일의 내용들이 이미지화된 모습으로 브라우저 화면에 띄워진다.
위의 렌더링 과정을 거쳐 최종적으로 페이지가 그려진 후,
사용자가 브라우저 화면의 크기를 조절하거나 화면에 요소가 추가/삭제 되는 경우, 화면에 있던 요소들의 크기가 바뀌게 된다.
➡️ 이때 화면에 나타나는 모습이 바뀌기 위해서는, 모든 요소의 위치와 크기를 다시 계산하고 다시 그려 보여주어야 한다.
: 웹 인터랙션으로 인해 렌더링 과정의 레이아웃 단계를 반복 수행하는 것
: 웹 인터랙션으로 인해 렌더링 과정의 페인트 단계를 반복 수행하는 것
const newDiv = document.createElement('div');
document.body.append(newDiv);
div.textContent = "I'm newly added!";
JavaScript를 이용해 DOM을 조작하는 경우, 브라우저는 DOM 트리를 다시 구성하고, CSSOM 트리와 합쳐 새로운 렌더 트리를 구축한다.
그러고나서 레이아웃과 페인트 과정을 또 다시 거쳐 화면에 보여준다.
리플로우 과정은 배치를 위한 연산을 해야 해서 CPU를 많이 차지하고,
리페인트 과정은 픽셀을 다시 화면에 찍어 그려야 하기 때문에 GPU를 많이 차지한다.
따라서 리플로우와 리페인트가 많이 발생하면 프레임 드랍(Frame Drop) 현상이 일어날 수 있다.
CSS 속성 중 레이아웃을 발생시키는 속성들이 있다. 이 속성들을 사용하게 되면 매번 렌더 트리를 만들고, 레이아웃이 발생하고, 이어서 페인팅을 발생시킨다.
따라서 레이아웃을 발생시키는 속성을 피하면 위의 과정이 발생하는 횟수를 줄일 수 있다.
리플로우 시 리페인트는 필연적으로 일어나므로, 가능하다면 리플로우가 발생하는 속성보다는 리페인트만 발생하는 속성을 사용하는 것이 좋다.
position
width
, height
top
, bottom
, left
, right
margin
, padding
, border, border-width
clear
, display
, float
, overflow
font-family
, fontsize
, font-weight
line-height
, min-height
text-align
, vertical-align
background
, background-image
, background-pisition
, background-repeat
, background-size
border-radius
, border-style
, box-shadow
color
, outline-color
line-style
, outline
clear
, display
, float
, visibility
font-family
, fontsize
, font-weight
opacity
속성은 리페인트가 일어나지 않으므로,visibilty
,display
속성을 사용하는 것보다 성능 개선에 도움이 된다.
position:absolute/fixed
position
속성을 absolute
또는 fixed
로 사용해주면 영향을 받는 주변 노드를 줄일 수 있다.fixed
는 영향을 받는 노드가 전혀 없는 경우, 리플로우 과정이 필요 없기 때문에 리페인트 연산 비용만 들일 수 있다.