리플로우와 리페인트가 일어나는 시점은 dom요소에 직접적인 변경이 있을 때 일어나며 리플로우가 발생하면 리페인트는 반드시 발생한다. 리플로우를 발생시키는 요인으로는 margin, position등이 있고, 리페인트를 발생시키는 요인으로는 background, color 등이 있다.
리플로우는 주로 cpu가속을, 리페인트는 gpu가속을 사용한다.
기존 reflow와 repaintdp에 관해서 알고 있던 내용
Reflow는 레이아웃을 다시 계산하는 과정이다.
레이아웃을 다시 계산한다는 것은 DOM트리가 변경되거나 CSSOM트리가 변경되어 렌더 트리가 재생성되는 것으로 리플로우가 자주 발생하면 사용자 경험에 좋지 않은 영향을 끼치게 된다.
리플로우를 유발하는 속성으로는 margin, padding, offsetHeight, offsetWidth 등 기존 요소의 길이나 위치에 변경이 있을 시에 발생한다.
리플로우가 발생하면 리페인트는 같이 발생한다.
Repaint는 요소의 시각적 스타일에 변경될 때 발생하는 과정이다.
레이아웃에 영향을 끼치지 않는 그러니깐 DOM트리나 CSSOM트리에 영향을 끼치지 않을 경우에 리플로우 없이 바로 Repaint가 발생된다. 예를 들어 color, boder-radius, background 등이 있다.
댓글