CSS에서 will-change 속성의 용도와 주의사항으로 올바른 것은?

Q: CSS에서 will-change 속성의 용도와 주의사항으로 올바른 것은?

브라우저에게 곧 변경될 속성을 미리 알려 최적화를 준비하게 하지만, 남용하면 오히려 성능이 저하된다 will-change는 브라우저에게 특정 속성(transform, opacity 등)이 곧 변경될 것임을 알려 GPU 레이어 생성 등 최적화를 미리 수행하게 합니다. 하지만 모든 요소에 적용하면 메모리 사용량이 급증하므로, 실제로 애니메이션이 발생하는 요소에만 제한적으로 사용해야 합니다.

어려움 MDN Web Docs

보기 및 정답

A 브라우저에게 곧 변경될 속성을 미리 알려 최적화를 준비하게 하지만, 남용하면 오히려 성능이 저하된다

B animation-iteration-count를 infinite로 설정하면 반드시 메모리 누수가 발생하게 된다

C animation-fill-mode: forwards는 애니메이션 시작 전 상태를 유지한다

D animation-direction: alternate는 홀수 번째만 역방향으로 재생된다

해설

will-change는 브라우저에게 특정 속성(transform, opacity 등)이 곧 변경될 것임을 알려 GPU 레이어 생성 등 최적화를 미리 수행하게 합니다. 하지만 모든 요소에 적용하면 메모리 사용량이 급증하므로, 실제로 애니메이션이 발생하는 요소에만 제한적으로 사용해야 합니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기

CSS에서 will-change 속성의 용도와 주의사항으로 올바른 것은?

해설

코딩, 제대로 배우고 싶다면?

관련 문제

시장과 사람의 답을 봤다면,다음 결과물의 구조를 고릅니다.

시장과 사람의 답을 봤다면,
다음 결과물의 구조를 고릅니다.