reflow와 repaint의 차이점

참고한 것들..

https://velog.io/@heelieben/JavaScript-Reflow-란-feat.-브라우저-렌더링

JavaScript | Reflow 란 (feat. 브라우저 렌더링)

 

https://enjoydev.life/blog/frontend/3-reflow-repaint

매끄럽게 동작하는 브라우저 만들기 - 렌더링 최적화 Reflow, Repaint

 

https://seokzin.tistory.com/entry/JavaScript-렌더링-최적화-Reflow와-Repaint

[JavaScript] 렌더링 최적화 (Reflow와 Repaint)

 

https://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

Rendering: repaint, reflow/relayout, restyle

---

참고한 것들을 바탕으로 ...

 

reflow와 repaint는 페이지 렌더링 되는 과정에서 발생하는 중요한 작업들입니다.

 

브라우저 렌더링

 

JS, CSS 파싱 → 렌더 트리 구축 →  Layout(Reflow) → Paint(Repaint) → 레이어 업데이트 → Composite

 

동작 과정

1. Load : 브라우저는 HTML, CSS, JS, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 서버에게 요청하고 응답 받습니다.
2. HTML과 CSS는 렌더링 엔진에 의해 파싱되고 트리구조가 생성되며, 자바스크립트는 자바스크립트 엔진에 의해 파싱되고 AST(Abstract Syntax Tree)가 생성됩니다.
3. 렌더링 엔진은 HTML과 CSS 파일을 로드 받은 후, 파싱하여 DOM과 CSSOM을 생성하고, 그를 결하여 렌더 트리를 생성합니다.
4. 자바스크트 엔진은 JS 파일을 로드 받은 후, 파싱하여 AST를 생성하고, 바이트 코드를 변환하여 실행한다. 자바스크립트는 인터프리터 언어이므로 문 단위로 해석되고 실행됩니다. 이 때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합됩니다.
5. 렌더 트리를 기반으로 HTML요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 페인팅 합니다.

 

💡4번 과정에 의해서 5번에서 다시 레이아웃을 재계산하는 상황을 Reflow라고 부릅니다.

 

 

Reflow와 Repaint

Repaint

재결합된 렌더 트리를 기반으로 다시 화면에 페인트하는 것을 말합니다.

 

무조건 Reflow가 발생해야 Repaint가 발생하는 것은 아닙니다.

background-color, visibility와 같이 레이아웃에 영향을 주지 않는 경우는 Repaint만 발생합니다.

 

Reflow

레이아웃 계산을 다시 하는 것으로, Reflow가 발생하면 Repaint는 필연적으로 발생합니다.

 

Reflow는 HTML요소의 위치와 크기를 계산해야 하기 때문에, Repaint에 비해서 시간이 오래걸립니다.

즉, 변경하려는 특정 요소의 위치와 크기뿐 아니라, 연관된 다른 요소들의 위치와 크기까지 재계산해야 하기 때문입니다. 따라서 리플로우가 자주 발생하도록 하는 코드는 지양해야합니다.

 

 

 

Reflow 발생하는 경우

• 요소의 크기, 위치 변경
• 브라우저 창의 크기 변경
• font size 변경
• scroll
• DOM API를 통한 노드 요소의 추가, 삭제

 

 

Reflow 발생시키는 CSS 프로퍼티

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 발생시키는 CSS 프로퍼티

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	....

 

 

https://devhints.io/layout-thrashing

Layout thrashing cheatsheet

 

 

 

Reflow와 Repaint 최소화하기

• 영향받는 노드 최소화하기 (position fixed, absolute)
• 숨겨진 엘리먼트 수정 (visibility: hidden → display: none)
• transform, opacity 속성 사용하기 (left, right → transform, visibility, display → opacity)
• 애니메이션 최적화(requestAnimationFrame 함수 사용)

 

 

개념 정리

 

- Reflow

위치와 크기를 계산하는 기하학적인 변화 담당

 

DOM요소의 위치와 크기를 계산하는 Layout과정을 다시 수행하는 것을 의미합니다.

렌더링 트리를 다시 생성하므로 부하가 크고, 상위 엘리먼트가 변경되면 하위 엘리먼트에도 영향을 끼칩니다.

Reflow가 발생하면 Repaint와 Composite 과정을 모두 수행하게 됩니다. → 큰 비용 발생

 

- Repaint

기하학적 변화 외의 눈으로 보여지는 부분 변화 담당

 

변경된 요소를 화면에 그려줄 때 발생합니다.(Layout과정에는 영향을 미치지 않음)

Repaint만 발생하게 된다면 Repaint와 Composite 과정만 수행합니다. → Reflow에 비해 상대적으로 훨씬 가벼운 작업