긴 리스트 꼭 가상화여야 할까? CSS 두 줄로 렌더링·페인팅 비용 72% 줄이기
회사 프로젝트 중 랭킹 페이지를 개편하다 문제를 만났습니다. 순위표는 채널에 따라 수백 명, 많게는 약 1,000명가량의 행을 한 번에 그립니다. 화면에는 십수 개만 보이지만, 브라우저는 스크롤을 시작하기도 전에 보이지 않는 행까지 전부의 위치, 크기와 픽셀을 계산합니다. 첫 렌더에서 이미 비용을 다 치르는 셈입니다. 가장 먼저 떠오른 답은 무한 스크롤이었습니다. 약 1,000행을 한 번에 내려주지 말고 필요한 만큼만 잘라서 받는 방식이죠. 그런데 두 가지가 걸렸습니다. 하나는, 무한 스크롤은 데이터를 나눠 받는 기법이지 그리는 비용을 직접 줄이는 기법이 아니라는 점입니다. 스크롤해서 행이 쌓이면 결국 다시 전부 그리게 되니까요. 다른 하나는 현실적인 문제로, 이 방식은 백엔드에 페이지네이션 API가 필..