Repaint2 브라우저의 Reflow(Re-layout)와 Repaint의 차이점은 무엇이며, 이를 최소화하기 위한 방법은 무엇인가요? 핵심 요약 (불릿)Reflow: 레이아웃 재계산 필요Repaint: 시각적 요소만 다시 그리기Reflow가 더 비용이 크며 최소화해야 함스타일 변경·DOM 접근 방식이 성능에 영향실제 면접 답변 예시 (문장형)“Reflow는 요소의 크기나 배치가 변할 때 브라우저가 레이아웃을 다시 계산하는 과정이고, Repaint는 위치 변화 없이 색상이나 배경처럼 시각적 표현만 다시 그리는 과정입니다. 일반적으로 Reflow가 훨씬 비용이 크기 때문에, DOM 조작을 batching 하거나 class 단위 변경, transform·opacity 활용 등으로 레이아웃 변화를 최소화해 성능 최적화를 할 수 있습니다.”실무 팁 & 주의점DOM을 조작할 때는 읽기/쓰기 작업이 번갈아 일어나지 않도록 묶어서 처리하세요.애니메이.. 2025. 12. 5. reflow와 repaint의 차이점 1️⃣ 정의용어의미Reflow (Layout)DOM 요소의 위치, 크기, 레이아웃이 변경될 때 발생. 브라우저가 레이아웃 계산을 다시 함.Repaint (Paint)요소의 색상, 배경, 글꼴 등 시각적 스타일만 변경될 때 발생. 레이아웃은 다시 계산하지 않고, 화면만 다시 그림.2️⃣ 예시Reflow 발생const box = document.getElementById('box');box.style.width = '200px'; // 크기 변경 → 레이아웃 재계산 → Reflow 발생box.style.height = '100px'; 요소의 크기, 위치, 부모-자식 관계 등이 바뀌면 Reflow가 발생합니다.Reflow는 리소스 많이 소모 → 성능에 영향.Repaint 발생box.style.backgro.. 2025. 9. 23. 이전 1 다음