Reflow란 HTML Element의 길이, 위치에 대한 픽셀 값을 연산해서 Layout을 생성하는 과정이다. 이 포스트에서는 Reflow가 일어나는 상세 과정과 Reflow 발생시 주의점을 살펴본다.
Reflow 개념과 과정
브라우저는 사용자에게 웹 페이지 화면을 보이기 위해
HTML 파일을 읽어서 HTML Element들 사이의 구조를 표현하는 DOM(Document Object Model)을 생성한다.
DOM은 <html>, <head>, <body>, <span>, <p> 등의 태그들로 구성되어 있다.
또한 CSS 파일을 읽어서 Element들의 스타일을 표현하는 CSSOM(Cascading Style Sheet Object Model)을 생성한다.
CSSOM은 HTML 태그, Class, ID 들에 적용될 스타일들이 나열되어 있다.
선택자의 깊이가 깊으면 그만큼 부하가 걸리므로 선택자의 깊이는 짧게 하는것이 좋다.
예를들어
1
.class1 .class2 .class3 { ... }
보다는
1
.class3 { ... }
이 좋다.
그리고 두가지의 Object Model을 하나로 합쳐서 Render Tree를 생성한다.
Render Tree는 DOM과 다르게 브라우저 화면에 실제로 보여지는 요소와 그 스타일만을 담고 보여지지 않는 요소는 생략한다.
따라서 display: none; 속성을 가진 Element는 DOM에는 포함되지만 Render Tree에서는 제외된다.
Note
visibility: hidden; 속성의 경우 display: none;과 마찬가지로 Element를 화면에 보이지 않게 하지만
display: none; 속성을 가진 Element가 Render Tree에서 생략되는 것과 달리,
visibility: hidden; 속성의 Element는 생략되지 않고 ‘빈 상자’로써 Render Tree에도 포함된다.
다음으로 완성된 Render Tree의 Element들을 그 스타일에 따라 화면에 배치하기 위해서
각 Element의 가로, 세로, 높이 등의 길이와 위치값을 실제 픽셀 값으로 계산하여 Layout을 생성한다.
따라서 top, bottom, height, width 등의 속성값이 Layout 연산에 영향을 준다.
이 단계를 우리는 Reflow라고 일컫기도 한다.
그 후 Render Tree와 Layout으로 실제 화면에 픽셀 별로 선을 그리고 색을 입히는 작업인 Paint 작업을 수행한다.
Paint 작업에는 color, background-color 등의 속성값이 해당한다.
마지막으로 Paint 작업은 Composite 단계를 포함하는데 이 단계에서는 Element들을 여러겹의 Layer로 표현해서
어떤 Layer가 우선순위를 가지고 어떤 Element들이 겹치는지 판단한다.
따라서 이 단계에서 opacity, z-index 와 같은 속성들이 적용된다.
여기까지 완료되면 브라우저에 Element들이 보여지게 된다.
HTML 렌더링 과정 요약
| Order | Step | Description |
|---|---|---|
| 1 | DOM, CSSOM | HTML, CSS 파일을 읽어서 Tree 구조화 |
| 2 | Render Tree | HTML Element에 Style을 적용했을 때, 뷰에 시각적으로 보이는 요소만으로 Render Tree 생성(보이지 않는 요소는 생략) |
| 3 | Layout Process(Reflow) | Render Tree의 내용으로부터 Element들의 상호작용을 고려하여 길이, 위치 값을 연산 |
| 4 | Paint | Element에 색상을 부여 |
| 5 | Composite | Element Layer 사이에 우선순위, 겹침 효과 부여 |
Reflow에 의한 부하
위 Reflow 개념과 과정 섹션에서 설명했듯, 브라우저가 HTML과 CSS 내용을 화면에 가시화 시키는 과정에서 Reflow란 HTML Element들의 길이, 위치 등의 Layout을 다시 연산하는 작업이다.
보통 Element의 Layout이 수정되면 해당 Element들의 조상, 자식 Element의 Layout도 달라진다.
예를들어 Element A의 Width가 길어지면 그 옆에있던 Element B의 위치는 그만큼 옆으로 밀려나게 된다. 또 이때 Element A의 Width가 충분히 길어지면 Element B가 뷰의 Width를 넘어서 그려지게 되고 그러면 줄바꿈이 일어나서 Element B가 아랫줄로 내려갈 수도 있다. 그로인해 Element A, B를 감싸고 있는 부모 Element C는 Width, Height가 모두 달라진다. 이런 경우 Element A의 Layout 뿐만 아니라 Element B, C의 Layout 연산과 Paint 과정이 모두 다시 일어난다.
또 애니메이션이 있다면 매 프레임 마다 Reflow가 발생한다.
이처럼 Reflow는 많은 비용이 드는 작업이므로 주의해야한다.
Reflow 회피
Reflow를 일으키지 않고 같은 효과를 낼수 있다면 그렇게 하는 것이 좋다. 아래의 방법들로 Reflow를 회피할 수 있다.
- Reflow가 발생하는 Element를 Document의 최대한 끝에 위치시켜 Reflow 영역을 최소화
- 가능한 경우에 한해 Reflow 하려는 Element에 CSS
position: fixed,position: absolute를 설정해서 Element를 Document Tree로부터 독립시키고 Reflow 영역을 최소화 transition대신transform,translate를 이용해서 Reflow를 발생시키지 않음
- https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
- https://developer.mozilla.org/ko/docs/Web/API/CSS_Object_Model
- https://developers.google.com/web/fundamentals/performance/rendering?hl=ko
- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction
- https://stackoverflow.com/questions/7338514/does-the-browsers-render-reflow-if-elements-position-is-absolute#:~:text=Moving%20the%20absolute%20positioned%20object,along%20with%20their%20parent%20container.
- https://designer-ej.tistory.com/entry/Web-Rendering-DOMCSSOMRender-Tree
- https://wonism.github.io/reflow-repaint/
- https://zinee-world.tistory.com/295
- https://stackoverflow.com/questions/2549296/whats-the-difference-between-reflow-and-repaint#:~:text=A%20repaint%2C%20or%20redraw%2C%20goes,the%20layout%20of%20the%20page.&text=Repaint%20occurs%20when%20some%20changes,such%20as%20color%20and%20visibility.
Share on
Copy URL
Kakao
Facebook
Twitter
LinkedIn
Leave a comment