브라우저의 렌더링 파이프라인(DOM, CSSOM, Render Tree, Layout, Paint, Compositing)을 설명하고, 특정 CSS 속성(예: width 변경 vs transform: scale()) 변경이 렌더링 성능에 미치는 영향이 왜 다른지, 그리고 이를 최적화하기 위한 방법(예: will-change 속성)에 대해 논해주세요.

브라우저 렌더링 파이프라인은 DOM과 CSSOM을 조합해 렌더 트리를 만들고, 레이아웃 계산 후 페인팅, 그리고 컴포지팅 과정을 거쳐 화면에 요소를 그립니다.

width 변경은 레이아웃 단계를 다시 거쳐야 하므로 비용이 많이 듭니다. 반면 transform: scale()은 레이아웃 단계를 건너뛰고 GPU 가속을 활용하여 페인팅과 컴포지팅만으로 처리되므로 훨씬 빠릅니다. opacity도 마찬가지입니다.

성능 최적화를 위해 will-change 속성을 사용하면 브라우저가 해당 요소의 변경을 미리 예측하여 레이어를 생성하고 GPU 가속을 준비하도록 힌트를 줄 수 있습니다.