몇년전 각 브라우저 벤더들이 모여서 표준의 호환성을 잘 유지하기 위해 공동으로 테스트를 만들어서 브라우저간 차이를 줄이려고 노력하면서 Baseline을 만들었습니다. Baseline은 새로운 기능이 Chrome, Edge, Firefox, Safari에서 모두 지원되고 이후 30개월이 지나서 대부분의 사이트에서 사용해도 된다고 판단되면 Baseline에 추가됩니다.


CSS에서 커스텀 프로퍼티를 만들 수 있는 @property도 Baseline에 추가되었습니다. 이 @property의 성능을 벤치마킹한 글입니다.


CSS 프로퍼티는 상속이 될 수도 있고 아닐 수도 있는데 상속되지 않는 프로퍼티가 상속되는 프로퍼티보다 훨씬 빠른 성능을 보여주고 등록되지 않은 커스텀 프로퍼티는 정규 프로퍼티보다 느린 속도를 보여주었습니다. 그래서 커스텀 프로퍼티를 등록할 때도 시간이 걸리지만 등록할 가치가 있고 상속이 필요하지 않다면 inherits: false로 지정하면 성능에서 큰 혜택을 볼 수 있습니다.


@property의 성능 비교도 재밌지만 Chromium의 PerfTestRunner를 이용해서 이 테스트를 위한 CSS Selector Benchmark를 구성한 것도 재밌었습니다. 잘 기억해두면 나중에 직접 테스트를 해보고 싶을 때 활용해 볼 수 있을 것 같습니다.


https://web.dev/blog/at-property-performance?hl=en

Benchmarking the performance of CSS @property  |  Articles  |  web.dev

web.dev

Benchmarking the performance of CSS @property  |  Articles  |  web.dev

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2024년 10월 17일 오후 4:57

 • 

저장 5조회 2,522

댓글 0