Benchmarking the performance of CSS @property | Articles | web.dev
web.dev
몇년전 각 브라우저 벤더들이 모여서 표준의 호환성을 잘 유지하기 위해 공동으로 테스트를 만들어서 브라우저간 차이를 줄이려고 노력하면서 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
다음 내용이 궁금하다면?
이미 회원이신가요?
2024년 10월 17일 오후 4:57
댓글 0
함께 읽은 게시물
왜 내 개발 프로젝트는 포트폴리오에 적기 부끄러울까
백
... 더 보기제가 리드하고 있는 조직(당근마켓 커뮤니티실)에서 백엔드 엔지니어를 채용 중이에요.
커뮤니티실에는 동네 이웃들의 이야기와 정보를 공유하는 동네생활팀, 이웃 간의 취미와 관심사를 연결하는 모임팀, 그리고 아파트 단지 생활을 더 편리하고 즐겁게 만들어 줄 단지팀이 있어요. 지금 내 동네에서 일어나고 있는 일들을 더 쉽게 즐기고 공유할 방법들을 찾는 일이라면 무엇이든 도전하여 실행에 옮겨요. 만드는 사람이 불편할수록 쓰는 사람은 편하다는 믿음으로 도전적인 문제를 풀어나갈 분과 함께하고자 해요.
... 더 보기이력서는 붙는데 면접에서 계속 떨어진다면?
이
... 더 보기What's new in UIKit (feat. WWDC 2025)
이
... 더 보기
