읽은 글들 (~24.10.31)
2024. 10. 31.
JavaScript
Why is CSS-in-JS slow?
styled components 같은 CSS-in-JS 라이브러리가 느린 이유를 설명하는 글. 설명이 자세하기도 하거니와 적절한 다이어그램도 첨부되어 있어 쉽게 읽을 수 있다. 따라서 원문을 읽는 걸 추천한다. 아래부터는 간단한 요약이다.
일반적인 vanilla CSS 는 아래와 같은 과정을 거쳐 적용된다.
- HTML 파싱
- 1번 과정 중
<head />
안에서 CSS 를 발견함 - CSS 파싱
- HTML 과 CSS 를 같이 적용해서 사용자에게 보여줌
하지만 CSS-in-JS 라이브러리들은 아래와 같은 과정을 거쳐야 한다.
- HTML 파싱
- HTML 을 사용자에게 보여줌
<body />
안에서<script />
를 발견함- JS 파싱
- JS 까지 적용된 결과를 사용자에게 보여줌
- CSS-in-JS 라이브러리가 CSS 를 생성함
- CSS 파싱
- CSS 까지 적용된 결과를 사용자에게 보여줌
따라서 느리다.
Vanilla Extract 같은 일부 라이브러리가 기존 CSS-in-JS 라이브러리들보다 빠른 이유는 런타임에서 CSS 를 생성하는 것이 아니라 컴파일 단계에서 미리 생성하기 때문.