[JavaScript] 렌더링 최적화 (Reflow와 Repaint)

렌더링을 최적화하는 여러 방법 중 하나는 Reflow와 Repaint 과정을 줄이는 것이다. 먼저 Reflow와 Repaint에 대해 알아본 뒤, 다양한 최적화 방법을 소개하겠다. 📐 Reflow html 요소의 크기나 위치가 변하면 그에 영향을 받는 노드들의 크기와 위치를 다시 계산하게 된다. 이렇게 요소의 변화에 따라 Layout 과정을 다시 수행하는 것을 Reflow라고 한다. Reflow가 발생하는 사례 페이지 초기 렌더링 (최초 Layout 과정) 윈도우 리사이징 (Viewport 크기 변경) DOM 노드 추가, 제거 DOM 노드 위치, 크기 변경 폰트 변경, 텍스트 내용 변경 이미지 크기 변경 애니메이션, 트랜지션 Reflow가 발생하는 속성 position width height left t..