[프론트엔드] 리플로우 / 리페인트

소개

오늘은 렌더링 성능 최적화를 위한 리플로우, 리페인트에 대해 알아보도록 하겠습니다.

---

목차

- 리플로우

- 리페인트

- 리플로우와 리페인트가 일어나는 상황

- 리플로우,리페인트 최적화 방법

---

1) 리플로우의 정의

: 레이아웃 변경 시 모든 노드를 다시 계산하여 레이아웃 트리(랜더 트리)를 재구성하는 작업입니다. 

---

2) 리페인트의 정의

: Reflow 과정이 끝나고 재생성된 레이아웃 트리(랜더 트리)를 다시 레이어에 그리는 작업입니다. 

---

3) 리플로우와 리페인트가 일어나는 상황

리플로우가 일어나는 상황

- 페이지 초기 렌더링 시

- 윈도우 리사이징 시 (Viewport 크기 변경 시)

- DOM 요소 추가 및 삭제 시

- DOM 요소의 위치, 크기 변경 시

- 폰트 변경과 이미지 크기 변경 시 

 

리페인트

- 리플로우가 실행된 순간 뒤

- 요소의 스타일(색상(color), 배경색(background-color) 등)이 변경될 때

- visibility: hidden <=> visible로 변경될 때

---

4) 리플로우 리페인트 최적화 방법

 

Reflow가 일어나는 속성

position, width, height, left, top, right, bottom, margin, padding, border, border-width,float 등

 

Repaint 가 일어나는 속성

background, background-image, background-position, background-repeat, background-size등 

 

1. DOM depth를 줄입니다. => reflow가 발생하면 변경된 노드의 위, 아래에 있는 DOM 노드도 reflow 되기 때문입니다. 

2. clean CSS sheet을 가져야 합니다. => 가능한 적은 properties와 attributes를 사용해서 repaint 를 줄여야 합니다.

3. CSS 선택자를 남용하지 않음으로써 CPU 비용을 줄여야 합니다. 

4. 애니메이션과 같은 복잡한 렌더링에는 position: absolute 나 position: fixed를 사용합니다. => fixed와 같이 영향을 받는 노드가 없는 경우 reflow 과정이 필요 없어지게 됩니다.
5. 프레임을 줄입니다. => ex) 1초에 1px 보다 1초에 3px 이동함으로써 연산비용을 줄입니다. 

 

---

참고자료

리플로우, 리페인트와 브라우저 렌더링 알아보기

https://mong-blog.tistory.com/entry/%EB%A6%AC%ED%94%8C%EB%A1%9C%EC%9A%B0-%EB%A6%AC%ED%8E%98%EC%9D%B8%ED%8A%B8%EC%99%80-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

 

Minimizing browser reflow
https://developers.google.com/speed/docs/insights/browser-reflow

 

Avoid Reflow & Repaint
https://www.hi-interactive.com/blog/avoid-reflow-repaint