피드로 돌아가기
Pretext – DOM 없이 텍스트 높이를 측정하는 순수 JS 레이아웃 라이브러리
GeekNewsGeekNews
Frontend

Pretext – DOM 없이 텍스트 높이를 측정하는 순수 JS 레이아웃 라이브러리

Pretext가 Canvas measureText로 브라우저 레이아웃 리플로우 없이 텍스트 높이를 순수 산술 연산으로 측정한다

princox2026년 3월 30일1분intermediate

AI 요약

Context

getBoundingClientRect나 offsetHeight로 텍스트 줄 수를 구하면 브라우저가 레이아웃 리플로우를 강제 실행한다. 이 작업은 렌더링 성능에 부담이 크다.

Technical Solution

  • Pretext → Canvas measureText()로 폰트 엔진에서 글자 너비를 직접 가져온다
  • 너비 캐싱 → 측정된 값을 순수 산술 연산으로 줄 계산한다
  • DOM 무접근 → DOM에 전혀 접근하지 않아 리플로우가 발생하지 않는다
  • layoutWithLines() → 줄 단위 레이아웃을 직접 제어할 수 있다
  • walkLineRanges(), layoutNextLine() → 세밀한 레이아웃 제어를 위한 API를 제공한다

Impact

500개 텍스트 기준 prepare() 약 19ms, 이후 layout() 약 0.09ms 수준이다.

Key Takeaway

폰트 엔진에 직접 접근하고 캐싱된 수치로 연산하는 패턴이 DOM 의존성 문제를 근본적으로 해결한다

실천 포인트

가상화 리스트나 AI 생성 텍스트 오버플로우 감지 환경에서 Pretext를 사용하면 레이아웃 리플로우 없이 텍스트 높이와 줄 수를 빠르게 계산할 수 있다

태그

#Canvas#JavaScript#DOM-free#Text Layout#Performance
원문 읽기
Pretext – DOM 없이 텍스트 높이를 측정하는 순수 JS 레이아웃 라이브러리 | Devpick