레이아웃, 페인트, 컴포지트는 무엇이며 웹 성능에 어떤 영향을 미치나요?

레이아웃, 페인트, 합성(Composite)은 브라우저 렌더링 파이프라인의 핵심 단계입니다. 이 과정은 HTML과 CSS에서 시작하여 렌더 트리(Render Tree)를 생성합니다. 레이아웃은 페이지의 각 요소의 위치와 크기를 결정합니다. 마진이나 너비와 같이 레이아웃 관련 CSS 속성을 변경하면 리플로우(Reflow)가 발생합니다. 페인트는 배경색이나 테두리와 같은 요소의 픽셀을 채우는 작업을 포함합니다. 페인트 속성이 변경되면 리페인트(Repaint)가 발생합니다. 합성(Composite)은 요소들을 레이어로 올려 GPU를 사용하여 변환(transformations) 및 불투명도(opacity) 변경을 처리합니다. 이 레이어들이 결합되어 최종 웹 페이지가 표시됩니다. 레이아웃 또는 페인트를 유발하는 것은 합성(Composite)만 수행하는 작업보다 계산 비용이 더 많이 듭니다. CSS를 최적화하여 합성 단계만 유발하도록 하면 웹 성능이 크게 향상됩니다.