참고링크
CSS 라이브러리를 고민하는 당신을 위해 (+ 성능비교)
모던 CSS 적용 방법 둘러보기(CSS-in-JS with zero-runtime)
두 링크를 읽으면서 생각의 정리가 필요해졌습니다.
성능비교글에서는 tailwind가 월등히 렌더링이 빨랐는데 두번째 글에서는 css파일을 읽어와야하기 때문에 FP가 느리다?라는 말때문에 혼동되었던 부분이 있어서 좀더 확인해봤습니다.
zero-runtime 스타일 라이브러리(ex-tailwind, vanila-extract)에서 빌드시에 미리 css 파일을 추출하는데 CSS파일이 렌더링 차단 요소라해서 렌더링이 늦다고 이해했했습니다. (이게 이해가 잘안되었던 부분!!)
그런데 정확히는 미리 추출된 css파일내용이 html 파일에 미리 로드되어있거나(internal CSS) 정적 CSS가 준비된 상태로 이해하면 될것 같습니다.
그래서 '레이아웃->스타일'순서로 보여주는게 아닌 '레이아웃+스타일'이 완성된 채의 모습을 바로 보여주는 방식이라 빠르게 렌더링을 도와주고(FP가 빠르다고 할수있음) 보여지자마자 TTI가 가능한 이점이 있습니다.
runtime 스타일 라이브러리의 경우(ex-emotion, styled-components) js파일이 로딩되면서 동적으로 스타일을 그려낼수있기 때문에 일단 성능면에서 비용이 크고, js를 읽는 동안 스타일이 렌더링되지 않은 구조적 html 레이아웃을 빠르게 보여주되 js파일을 다 읽고 난 다음에 스타일을 렌더링을 합니다. 그래서 '레이아웃->스타일' 순서로 노출해서 빠르게 내용물을 확인할수있지만 스타일이 늦게 입혀지고, 스타일이 입혀진 시점 이후 TTI가 가능하여 매우 늦다고 할수 있습니다.
정리하면
CSS파일을 로딩해오는 것이 지연 요소인것은 맞습니다.
하지만 비교가 더이상 필요없을만큼 runtime에서 돌아가는 css in js의 js번들 파일 자체가 오래걸립니다. 이것 하나만으로 더 얘기할 필요가 없지않나 싶습니다.
블로그에서 얘기했던 "정적 CSS추출이 First Paint가 늦다." 는 정말 전통적 방식의...(CSS파일이 매우 크다거나, 외부 CSS를 불러온다는 등) html, css, js 파일을 순차대로 로딩해오는 경우의 예시인 것 같습니다.
그래서 DX를 좀더 중시하면서 성능에 크게 차이가 없다면 런타임,
성능이나 UX를 더 고민하면 zero런타임을 선택할 것이다라고...생각의 정리를 했습니다.
혹시 잘못이해한 부분이 있다면 알려주세요~!
