📌 문제 및 배경
현재 만들고 있는 프로덕트의 화면 중에서, Input과 Output에서 대용량 텍스트를(5만 토큰 이상) 렌더링해서 보여줘야 하는 상황이었다.
기존에는 해당 텍스트를 div + pre 엘리먼트를 조합하여 렌더링 시켰다.
하지만, 기본적으로 해당 텍스트를 렌더링 하는데에도 생각 이상의 시간이 소요되었고,
또한, 브라우저 사이즈를 줄일 때 마다 리플로우 및 리페인팅이 급증하여 렌더링 하는데 굉장한 시간이 소요되어서 최적화할 필요성을 느꼈다.
📌 해결
이번에 최적화하면서 알게 된 것인데, pre 태그를 제거하고, 텍스트를 표시하는 엘리먼트를 textarea 를 사용하였다. 스크롤은 textarea의 네이티브 스크롤을 사용하였다.
div + pre 를 조합하여 사용하면 브라우저의 폭을 변경할 때 마다 전체 줄바꿈을 재계산하고 높이를 재측정하면서 리플로우 및 리페인트가 급증한다.
왜 textarea가 더 빠를까?
textarea 엘리먼트를 사용하여 텍스트를 렌더링 하면, DOM 노드 증가 없이 내부 버퍼로 텍스트를 처리한다.
또한, 전용 텍스트 레이아웃 엔진과 캐시를 사용하여 재계산 범위를 최소화한다.
마지막으로, textarea는 자식이 없고, 스타일 변화가 단순해 스타일/레이아웃 재계산 폭이 작다.
다시 말해, textarea는 대용량 텍스트 표시, 스크롤, 리사이즈에 특화된 네이티브 최적화 덕분에, 동일한 줄바꿈 유지 상태에서도 리플로우/리페인트 비용이 크게 줄어든다.
간단하게 지표를 보면서 확인하기
크롬의 Performance 탭을 사용해서 대용량 텍스트를 렌더링 한 상태에서, 브라우저 사이즈를 똑같이 조절해보았다.
첫번째 사진의 지표는 기존의 div + pre 엘리먼트를 사용하여 대용량 텍스트를 렌더링 하였고, 두번째 사진의 지표는 textarea 엘리먼트를 사용하여 대용량 텍스트를 렌더링 한 결과이다.
일단, 렌더링 총 시간이 2,159ms에서 768ms로 약 -64% 감소함을 볼 수 있다.
- 정확하게 보기위해 구간당 평균으로 환산한다면, 414ms/s → 156ms/s (약 −62%)
최적화 함으로써 레이아웃/스타일 재계산 부담이 크게 줄어 들어 체감 렉 감소에 직결적이었다.
만약, 이번 개선으로도 사용자 경험이 크게 개선되지 않는다면 가시 영역만 렌더링하는것을 검토해볼 수 있을 것 같다.
