Pretext 라이브러리가 DOM 읽기 없이 텍스트 높이를 예측해 레이아웃 재계산을 제거한다

Context

브라우저는 텍스트 블록의 높이를 알기 위해 getBoundingClientRect()나 offsetHeight를 호출한다. 이 호출은 동기적 레이아웃 재계산을 유발하며, 500개의 메시지를 가진 가상 스크롤 리스트에서 500회의 레이아웃 일시정지를 발생시킨다.

Technical Solution

• Pretext → canvas.measureText()를 통해 DOM 레이아웃 프로세스 외부에서 폰트 엔진에 접근한다
• prepare() → 텍스트 정규화, Intl.Segmenter 기반 로캘 인식 토큰화, 양방향 텍스트 처리, canvas 측정 캐싱을 수행한다
• layout() → cached 너비 기반 순수 산술 연산으로 0.09ms에 500개 텍스트 배치의 높이를 예측한다
• 예측된 높이로 DOM 노드를 정확한 위치에 렌더링하되, 텍스트 자체는 DOM에 남아 접근성을 보존한다
• CSS fit-content의 한계를 해결하는 walkLineRanges()로 최적 너비를 수학적으로 계산한다

Impact

layout() 0.09ms vs prepare() 19ms로 약 200배 이상의 성능 차이를 보인다. prepare() 비용은 최초 1회만 발생하고 이후 리사이즈 시 fast path를 따른다.

Key Takeaway

화면 연출보다 텍스트 높이 예측 기능이 웹 플랫폼에 대한 진정한 혁신이다.