CSS의 will-change 속성은 브라우저에게 요소의 예상 변경 사항을 알려주는 역할을 합니다.
이 속성을 사용하면 브라우저는 요소가 실제로 스타일 변형이 필요할 때 필요한 리소스를 사전에 최적화하여 요소의 스타일 변경과 렌더링을 더 빠르고 최적화된 방식으로 처리할 수 있습니다. 이를 통해 "깜빡임"이나 "떨림"과 같은 시각적인 현상을 줄이거나 제거하여 웹 페이지를 시각적으로 더 부드럽게 처리할 수 있습니다. 이는 웹 사이트의 스타일 성능을 향상시킬 수 있는 장점을 제공합니다.
형식 구문
selector {
will-change: /* value */
}
구문
/* 키워드 값 */
will-change: auto;
will-change: scroll-position;
will-change: transform;
will-change: contents;
will-change: opacity;
will-change: left, bottom;
주의해야 할 사항
- 남용하지 마세요!
- 불필요한 최적화를 피하세요!
- 브라우저에 작업할 충분한 시간 제공해 주세요!
- will-change 속성을 사용한 후 제거해 주세요!
결론
will-change 속성은 성능 최적화를 위한 필수 도구로 활용될 수 있습니다. 하지만 올바르게 사용해야 합니다. 일부 요소에 대해서만 필요한 변경 사항을 명시하는 것이 좋으며, 모든 요소에 일괄적으로 적용하는 것은 효율적이지 않을 수 있습니다. 또한, will-change 속성은 변경이 예상되는 시기에 적용해야 하며, 변경이 발생한 후에는 적절히 제거하는 것이 좋습니다.
참고자료
CSS will-change 속성 – 성능 최적화를 위한 예비 준비 - 코딩에브리바디
will-change 속성은 CSS에서 요소의 속성이 변경될 것임을 브라우저에 미리 알리는 역할을 합니다. 이를 통해 브라우저는 요소의 속성이 변경될 때 최적의 성능을 발휘할 수 있습니다.
codingeverybody.kr
https://coding.courses/css-will-change-property/
CSS will-change property – A Hint for Rendering Optimization - codingCourses
The CSS will-change property gives the browser a hint about which styles are likely to change, allowing it to optimize rendering performance in advance—especially for animations and visual effects.
coding.courses
https://codingeverybody.jp/css-will-change/
CSS will-changeプロパティ– パフォ：マンス最適化のための事前準備 - codingEverybody
「will-change」プロパティは、要素のプロパティが変化することを事前にブラウザに伝えるためのものです。これにより、変化時にパフォーマンスを最適化できます。
codingeverybody.jp