간단메모 - 리페인트와 리플로우

https://webclub.tistory.com/346

Reflow or Repaint(or ReDraw)과정 설명 및 최적화 방법

매번 조금씩 가물가물 하는 내용. 

 

Reflow

돔의 크기 같은게 변경되서, 자기자신부터, 자식 부모, 부모의 부보까지 수치를 다시 계산해서 그리고, 렌더트리를 생성하는 과정이다. 

 

Repaint

이러고 나서 렌더트리를 다시그리게 되는데 이를 Repaint라고 한다

 

 

 

어떤 div의 크기가 변경된다면 아래의 동작이 일어난다. 

1. 변경되는 이벤트가 발생

2. 수치를 다시 계산

3. reflow가 일어나면서 렌더트리를 생성

4. 새로 생성된 렌더트리대로 화면을 그리는 Repaint가 발생

 

 

이때 모든 스타일 변경이 reflow를 일으키는 것은 아니다. 색깔같은것만 변경되면 repaint만 일어난다. 

 

 

Reflow가 일어날때

노드가 생기거나 사라질때, 요소의 위치가 변경되거나 크기 변경 등

 

 

앵간하면 reflow가 적게 일어나도록 코드를 짜자고 합니다...

 

 

추가적으로 좋은 글

https://falsy.me/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EC%9D%B4%ED%95%B4-1-reflow-repaint%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC-%EC%95%8C%EC%95%84%EB%B4%85%EB%8B%88%EB%8B%A4/

폴시랩