귀하는 로그인되어 있지 않습니다. 이대로 편집하면 귀하의 IP 주소가 편집 기록에 남게 됩니다.스팸 방지 검사입니다. 이것을 입력하지 마세요!== CSS 성능과 최적화 == CSS는 렌더링(그리기) 단계에서 '''레이아웃(Layout)''', '''페인트(Paint)''', '''컴포지트(Composite)''' 과정 등을 거치는데, 특정 속성들은 이 중 하나 이상을 크게 변경하여 성능에 영향을 미친다. 성능 최적화를 위해서는 속성이 어떤 렌더링 단계를 유발하는지를 이해하는 것이 중요하다. === 속도가 느린(비용이 큰) 속성들 === * '''레이아웃(Layout) 트리거''': <code>width</code>, <code>height</code>, <code>margin</code>, <code>padding</code>, <code>border</code>, <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code> 등 레이아웃을 재계산(Reflow)해야 하는 속성들 - 이들은 요소의 크기나 위치를 재계산하므로, 형제 요소나 부모 요소의 배치에도 영향을 주어 '''상대적으로 속도가 느리다'''. * '''페인트(Paint) 트리거''': <code>background</code>, <code>box-shadow</code>, <code>color</code>, <code>outline</code>, <code>border-radius</code> 등 시각적(페인트) 업데이트를 필요로 하는 속성들 - 레이아웃을 전부 다시 계산하는 것은 아니지만, 다시 그리기(Repaint)가 일어나므로 여전히 비용이 크다. === 속도가 빠른(비용이 적은) 속성들 === * '''컴포지트(Composite) 트리거''': <code>transform</code>, <code>opacity</code>, <code>filter</code>(일부 브라우저) 등 - GPU 가속이 적용되거나, 레이아웃이나 페인트 없이 후반 컴포지팅 단계에서만 처리되는 경우가 많아 '''상대적으로 빠른 편'''이다. - 예: <code>transform: translateX(100px)</code>와 같이 위치 이동을 할 때 <code>transform</code> 속성을 사용하면, <code>left</code> 변경에 비해 비용이 적다. === 최적화 방안 === * '''하드웨어 가속 활용''': <code>transform</code> 또는 <code>opacity</code>를 사용해 애니메이션을 구현하고, 필요시 <code>will-change</code> 속성으로 브라우저에게 미리 최적화를 힌트준다. * '''변경이 잦은 요소 최소화''': 자주 변경되는 애니메이션 요소에는 레이아웃을 재계산해야 하는 속성 대신 컴포지트만 유발하는 속성을 사용한다. * '''CSS 애니메이션 대신 적절한 JS/WAAP(브라우저 API) 고려''': 복잡한 애니메이션이나 타이밍 제어가 필요할 때는 <code>requestAnimationFrame</code>을 활용해 레이아웃 계산을 최소화한다. * '''불필요한 중첩이나 복잡한 셀렉터 자제''': 복잡한 셀렉터는 브라우저의 스타일 계산(Stage)에도 영향을 준다. * '''이미지 스프라이트, 아이콘 폰트, SVG 활용''': 페인트 영역을 최소화하고 네트워크 요청 수를 줄여 성능을 끌어올린다. 편집 요약 가온 위키에서의 모든 기여는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 라이선스로 배포된다는 점을 유의해 주세요(자세한 내용에 대해서는 가온 위키:저작권 문서를 읽어주세요). 만약 여기에 동의하지 않는다면 문서를 저장하지 말아 주세요. 또한, 직접 작성했거나 퍼블릭 도메인과 같은 자유 문서에서 가져왔다는 것을 보증해야 합니다. 저작권이 있는 내용을 허가 없이 저장하지 마세요! 취소 편집 도움말 (새 창에서 열림)