목록repaint (1)

sodol-dotcom

Reflow & Repaint

Reflow와 Repaint는 웹 페이지의 렌더링 과정에서 발생하는 두 가지 중요한 개념이다.이 개념을 이해하는 것은 성능 최적화에 큰 도움이 된다.  Reflow (리플로우)정의: Reflow는 DOM 요소의 크기, 위치, 또는 구조가 변경될 때 발생한다. 예를 들어, 요소의 크기를 변경하거나, 새로운 요소를 추가하거나, CSS 스타일을 수정할 때 발생한다.예시: 브라우저에서 텍스트의 폰트 크기를 변경할 때요소의 `margin`, `padding`, `border` 등을 수정할 때화면 크기가 변경될 때 (예: 창 크기 조절)중요성: Reflow가 발생하면 브라우저는 레이아웃을 다시 계산해야 하므로 CPU와 메모리 자원을 소모하게 된다. 따라서 너무 많은 Reflow는 성능 저하를 일으킬 수 있다.  R..
Fundamentals/Browser Mechanics 2024. 10. 2. 17:41
이전 Prev 1 Next 다음