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
“이 문제는 왜 해결해야 하죠?” 토스페이먼츠의 Product Manager는 늘 이 질문에서 시작합니다. 화면을 기획하거나, 기능을 정리하는 일보다 먼저 우리는 문제의 본질을 정의하고 싶은 사람들입니다. 그렇다면 ‘문제의 본질’부터 고민하는 토스페이먼츠의 PM은 실제로 어떤 방식으로 일하고 있을까요? 토스페이먼츠 PM 김명훈님의 이야기를 함께 들어보세요.
혹시 Claude 나 cursor 등 AI 로 개발하실 때
뭔가 AI 스러운 뻔한 디자인 때문에
사람들이 요즘 AI, ChatGPT에게 의존하여 사고력이 저하되고 있다는 이야기가 많이 나온다.
두뇌 발달에 안 좋으니, 80년대에 계산기 쓰지마라, 90년대에 컴퓨터 쓰지마라, 2000년대에 엑셀 팡션 쓰지마라, 2010년에 스마트폰 쓰지마라는 말과 같다는 생각이다.