CSS content-visibility로 렌더링 성능 향상 시키기

오늘 소개해드릴 글은 라인플러스의 김찬희님이 번역해주신 글입니다.

CSS의 content-visibility에 대해 알고 계신가요? 브라우저가 요소의 렌더링을 필요로 할 때 까지 생략할 수 있도록 해 페이지 로드 성능을 향상할 수 있게 도와주는 CSS 속성입니다.

이 글에서는 content-visibility를 이용해 큰 목록의 렌더링 성능 이슈를 해결했던 실제 경험을 통해 어떤 장점이 있는지 그리고 한계는 무엇인지에 대해 일반적으로 큰 목록의 성능 향상을 위해 사용하는 가상 목록과 비교하여 자세히 설명하고 있습니다.

실제 문제가 되었던 부분을 추적하는 것 부터, 해결하는 과정까지 자세하게 풀어내며 고민했던 내용들을 살펴보시고 나면, 성능 문제가 발생했을 때 고려해 볼 수 있는 또 하나의 선택지를 얻으실 수 있지 않을까 생각됩니다.

글 링크 : https://velog.io/@superlipbalm/improving-rendering-performance-with-css-content-visibility