Reflow

브라우저 렌더링 최적화: Reflow와 Repaint 완벽 이해

웹 성능을 이야기할 때 꼭 등장하는 단어가 있습니다.바로 Reflow(리플로우) 와 Repaint(리페인트) 입니다.이 두 개념은 브라우저가 화면을 그리는 과정의 핵심이며,렌더링 성능 최적화의 출발점이기도 합니다.🧱 Reflow란? (Layout 단계)Reflow는 브라우저가 요소의 크기나 위치를 다시 계산하는 과정이에요.즉, DOM 구조나 CSS 속성 중 레이아웃에 영향을 주는 변화가 있을 때 발생합니다.예를 들어, 다음과 같은 상황이 Reflow를 유발합니다:요소의 width, height, margin, padding 변경새로운 DOM 요소 추가 / 제거display 속성 변경폰트 크기 변경창 크기 조절(리사이즈)Reflow는 화면의 구조를 완전히 다시 계산해야 하므로비용이 크고, 성능 저하의 주..