CSS interpolate-size 기반 아코디언, JS보다 빠를까? 실측 성능 테스트
1. 들어가며아코디언 애니메이션을 구현할 때 JavaScript와 CSS 중 어떤 방식이 더 적합할까?2024년 말에 CSS에 interpolate-size라는 새로운 실험 속성이 추가되었다.이 속성은 height나 width 같은 레이아웃 속성의 애니메이션을 보다 자연스럽게 처리할 수 있도록 도와준다고 한다.그럼 JS 방식과 비교했을 때 성능적으로 어떤 장점이 있을까?JS 기반 아코디언은 scrollHeight를 계산해 max-height를 동적으로 변경하는 방식으로 동작한다.반면, interpolate-size를 사용하면 스크립트 연산 없이 애니메이션을 적용할 수 있다.이론적으로 CSS 방식이 더 성능이 좋아야 하지만, 실제 성능 테스트 데이터를 확보해 확인해보고 싶었다.그러나 수동 테스트만으로는 정..
2025. 3. 15.
