공부한 내용을 정리한 글입니다
내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요.
배움에 큰 도움이 됩니다. 🖋
Render Tree
앞에서 생성한 DOM Tree는 문서의 내용, CSSOM Tree는 그 문서에 적용할 스타일 규칙을 담고 있다.
이 둘은 아직 서로 독립된 객체이기 때문에 스타일이 적용된 내용을 출력하기 위해 둘을 합쳐 Render Tree를 생성한다.
DOM Tree에 새로운 Node가 추가될 때 해당 Node의 attach 메서드가 실행되는데, 이 메서드는 해당 Node의 스타일 정보를 계산해 객체 형태로 반환한다. Render Tree 생성시 각 요소들의 스타일 계산, 다른 요소들에 대한 스타일 속성 참조가 이루어진다.
Render 트리는 말 그대로 실제 화면에 표시되는 Node로만 구성된다.
렌더링 엔진이 DOM 트리의 루트 부터 각 Node를 가로지르며 일치하는 CSSOM 규칙을 찾아 적용하는데, 이 때 <script>, <meta> 태그처럼 화면에 출력하는 태그가 아니거나 CSS의 'display: none' 속성을 가지는 Node들은 Render 트리 구성에서 제외하기 때문이다.
렌더링 엔진은 위 작업을 반복하며 내용과 스타일을 적용한 Node들을 내보내 Render 트리를 구성한다.
Reflow ( 렌더 트리 배치 )
Render Tree 구성이 화면에 보여줄 Node의 내용과 스타일을 계산하는 작업이라면, Reflow은 Render Tree를 루트부터 탐색하여 디바이스의 뷰포트 내에서 각 Node들을 어디에 어떤 크기로 위치시킬지를 계산하는 작업이다.
이 단계에서 %, vh, vw처럼 상대적이었던 측정값이 디바이스 뷰포트 내에서의 절대적 px 단위로 변환된다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Critial Path: Hello world!</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello world!</div>
</div>
</body>
</html>
Box Model
Reflow 단계에서 계산을 마치면 Box Model이 출력된다. Box Model의 넓이는 뷰포트, 높이는 안에 든 내용을 기준으로 측정한다.
그렇기 때문에 윈도우 사이즈를 줄이거나 font를 변경하면 다시 계산이 필요하고, Reflow가 발생한다.
기기 화면 안에서 박스를 배치하는 방식
Nomal
- 일반적인 흐름에 따라 순차적으로 배치되는 박스. (DOM Tree 순서와 동일)
Float
- 떠있는 상태로 배치되는 박스. Normal과 같이 배치된 후, 양 끝(left or right)으로 이동
- float된 요소가 앞, 뒤에 <div>같은 block요소가 오면 float된 요소가 없는 듯 배치되고, <span>과 같은 inline요소가 오면 float요소 주위로 흐르듯이 배치된다
Absolute
- DOM 트리의 일반적 흐름에서 벗어나 절대적인 자리에 배치되는 박스
Reflow가 일어나는 대표적 속성
position으로 좌표를 바꾸거나, 폰트나 폰트사이즈가 바뀌는 등 Node의 위치나 크기 변경이 Reflow 과정에서 이루어진다.
| position | width | height | left | top |
| right | bottom | margin | padding | border |
| border-width | clear | display | float | font-family |
| font-size | font-weight | line-height | min-height | overflow |
| text-align | vertical-align | white-space | .... |
Repaint ( 렌더 트리 표현)
렌더링 엔진이 Render Tree를 순회하며 이미 Reflow에서 계산한 위치, 크기를 제외한 나머지 CSS 속성들(색상, 투명도, 이미지, 그림자 등)을 적용하고, UI backend를 이용해 각 Node들을 화면 상의 실제 px로 변환한다.
Repaint가 일어나는 대표적 속성
속성이 변경된다 해서 Repaint 과정을 위해 반드시 Reflow의 선행이 필요하지는 않다.
크기, 위치를 변경하지 않는 Node의 color, background-color, visibility 등이 변경될 경우 레이아웃에는 영향이 없기 때문에 Reflow를 다시 거치지 않고 Repaint만 재발생한다.
| background | background-image | background-position | background-repeat | background-size |
| border-radius | border-style | box-shadow | color | line-style |
| outline | outline-color | outline-style | outline-width | text-decoration |
| visibility | .... |
Composite & Render (합성 & 렌더)
Repaint 단계에서 생성된 레이어를 합성해 실제 화면에 나타낸다.
참고
Render-tree Construction, Layout, and Paint
TODO
web.dev
https://velog.io/@haesoohaesoo/reflow-repaint
reflow / repaint
이전에 코드리뷰를 받았을 때, reflow와 repaint 그리고 성능 최적화 라는 키워드에 대해 리뷰 받아본 적이 있었다.리뷰 받을 당시 코드를 비슷하게 재구성해보자면 아래와 같다.카카오톡처럼 메세
velog.io
https://blog.logrocket.com/how-browser-rendering-works-behind-scenes
How browser rendering works — behind the scenes - LogRocket Blog
How do browsers bring web apps to life? Understanding client-side rendering will empower you to truly optimize your web projects.
blog.logrocket.com
https://velog.io/@young_pallete/Reflow-Repaint을-알아보자
Reflow, Repaint을 알아보자!
오랜만의 글인 것 같습니다. 최근에 제 자신에 대한 회의감도 들었고, 그래서 잠시 슬럼프를 겪었지만, 이제 어느정도 극복하고, 다시 꾸준함을 찾으려합니다. 결국 꾸준함이야 말로 제가 성장
velog.io
https://boxfoxs.tistory.com/408
브라우저 렌더링 과정 - Reflow Repaint, 그리고 성능 최적화
렌더링이란 HTML, CSS, JavaScript등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정을 말합니다. 웹 개발을 하며 브라우저의 렌더링 과정을 정확하게 이해하고 있으면 어떻게 개
boxfoxs.tistory.com
'WEB' 카테고리의 다른 글
| presigned URL을 이용 중 CORS 에러가 났다 (0) | 2023.02.06 |
|---|---|
| CSR과 SSR (0) | 2023.01.25 |
| Browser의 렌더링_Browser, DOM, SSOM (1/2) (0) | 2023.01.16 |
| Token의 구조부터 Access, Refresh Token까지의 간략한 정리 (0) | 2023.01.13 |
| Next SEO (0) | 2023.01.12 |
댓글