[TIL] CSS in JS의 성능에 대한 이야기

작업하던 프로젝트에서 성능 최적화를 위한 코드를 작성하고 실제로 리랜더링되는 컴포넌트들을 살펴보는 중에 문득 Styled-Components로 작성된 컴포넌트들이 반복적으로 랜더링되는 것을 목격했습니다.

수치로 따지자면 랜더링 되는데 0.1 ms미만으로 매우 짧은 시간을 차지하고 있긴하지만 이러한 컴포넌트가 수백개 수천개 쌓인다면 문제가 될 것이 당연해보였습니다.

특히 현재 작업 중인 프로젝트에서는 스크립트를 계속해서 업데이트하며 화면에 표시하는 방식을 사용하고 있기 때문에 다음 문장이 실행될 때마다, 한글자 한글자 업데이트될 때마다 리랜더링이 발생하는 것이 너무나 못마땅했습니다.

CSS in JS가 나쁘다는 것은 아니지만 JS가 적으면 웹사이트가 빨라지는 것은 당연한 일입니다.

자료를 조사하던 중 CSS in JS와 CSS파일이 별도로 분리된 경우를 비교한 글(Real-world CSS vs. CSS-in-JS performance comparison)을 발견했습니다.

결론은 역시 JS가 적으면 웹사이트는 빨라지고 CSS 파일을 분리하는게 좋다는 것입니다.

여러 비교 수치를 살펴보면 대부분의 경우 큰 성능차이는 없지만 CSS파일을 별도로 분리한 것이 미미하게 성능이 더 좋음을 알 수 있었습니다.

여기까지는 무시해도 괜찮은 수준이라고 결론지을 뻔 했지만 사용자 상호작용을 비교한 부분에서 깜짝 놀랄 수 밖에 없었습니다.

	Styled-Components	Linaria	Diff
Scripting	2955	2392	-563ms
Rendering	3002	2525	-477ms
Painting	329	313	-16ms
Total Blocking Time	1862.66	994.07	-868ms

스타일드 컴포넌트에서 거의 두배에 가까운 블로킹 시간이 발생하는 것으로 나타났습니다.

결론

개발 경험을 위해 사용자 경험을 희생할 수도 있고 사용자 경험을 위해 개발 경험을 희생할 수도 있겠지만 무작정 사용자 경험을 위해 개발 경험을 희생해야할 필요는 없을 것 같습니다.

계속해서 다양한 CSS in JS 라이브러리가 출시되고 있고 컴퓨터 성능도 진보하고 있기 때문에 CSS in JS가 더 큰 생태계를 이룰 것이라고 생각합니다.

기사 원문에서도 소개된 Linaria와 같이 빌드할때 CSS파일로 추출해주는 라이브러리도 있습니다.