TIL | Reflow, Repaint

Reflow, Repaint JS 코드에 의해 DOM or CSSOM을 변경하는 DOM API가 사용될 경우, DOM or CSSOM이 변경된다. 이때 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합되고 변경된 트리를 기반으로 레이아웃과 페인트 과정을 브라우저 화면에 다시 렌더링하게 되는데, 이러한 과정을 리플로우(Reflow), 리페인트(Repaint)라고 한다. Reflow 레이아웃의 재계산하는 것을 말하며, 다음과 같이 레이아웃에 영향을 주는 변경이 발생한 경우에 한하여 재배치를 위한 위치 계산 작업이 이루어진다. DOM 노드의 추가, 제거 DOM 노드의 위치 변경 DOM 노드의 크기 변경(margin, padding, border, width, height 등..) CSS3 애니메이션과 트랜지..