Reflow ,Repaint

Reflow ,Repaint

---

Reflow란?

웹 페이지 내에서 요소의 위치 또는 크기에 변화가 있을때, 변화된 레이아웃을 다시 계산 하는 과정을 말한다.

1. 크기 관련 속성

• width , height , padding , margin 등

1. 위치 관련 속성

• position , top , left 등

1. 레이아웃 속성

• display, flex, grid 등

1. 폰트 크기 관련 속성

• font-size , font-weight 등

Repaint 란?

웹 페이지 내에서 요소의 시각적인 표현에 변화가 있을 때 변화된 표현을 다시 계산하여 렌더 트리에 적용하는 과정

1. 색상 관련 속성

• color , background-color 등

1. 테두리 관련 속성

• border-color , border-radius 등

Reflow 와 Repaint 의 성능상 차이점

Reflow 는 CPU 부하가 큰 작업이다. ( 최소화 하는 것이 좋음)

상위 노드가 Reflow 되는 경우에 자식 노드들도 Reflow가 발생 하여

하위 렌더 트리를 다시 계산하고 재구성하는 과정이 생김.

Repaint의 경우에는 자식노드들의 Reflow , Repaint가 발생하지 않는다.