기존 구문 강조의 성능 문제와 CSS Custom Highlight API
전통적인 구문 강조는 각 토큰을 개별 <span> 요소로 감싸 수백에서 수천 개의 DOM 노드를 생성하여 브라우저 렌더링 오버헤드, 높은 메모리 사용량, 복잡한 HTML 구조를 야기했습니다. CSS Custom Highlight API는 DOM 조작 없이 텍스트 범위에 스타일을 적용하여 이 문제를 해결합니다. 이는 텍스트 노드 내의 특정 문자 위치를 가리키는 Range 객체를 정의하고, 이를 유형별로 그룹화하여 브라우저 레지스트리에 등록하는 방식으로 작동하며, 텍스트는 단일 텍스트 노드로 유지됩니다.
주요 장점
-
고성능: DOM 변이가 없어 초기 및 재렌더링이 빠릅니다.
-
메모리 효율성:
Range객체는 가벼워 최소한의 메모리를 사용합니다. -
깔끔한 HTML: DOM 구조가 단순하게 유지됩니다.
-
순수 CSS 스타일링:
::highlight()가상 요소를 통해 선언적으로 스타일을 정의합니다.
구현 및 브라우저 지원
구현은 ::highlight(token-type) CSS 규칙으로 스타일을 정의하고, JavaScript에서 코드를 토큰화하여 Range 객체를 생성, 이를 Highlight 객체로 그룹화하여 CSS.highlights 레지스트리에 등록합니다. 이 API는 Chrome/Edge 105+, Firefox 140+, Safari 17.2+ 등 모든 주요 최신 브라우저에서 지원되므로, if (!CSS.highlights)를 통한 기능 확인 및 폴백 전략을 권장합니다.
제한 사항 및 전통적 방식 대비 개선점
주요 제한 사항으로는 일반 텍스트 콘텐츠 및 단일 텍스트 노드에만 적용 가능하며, 텍스트 내용 변경 시 Range의 수동 갱신이 필요하다는 점이 있습니다. 전통적인 <span> 기반 방식과 비교할 때, CSS Custom Highlight API는 DOM 노드 수, 메모리 사용량, 렌더링 속도, HTML 구조 등 모든 면에서 훨씬 효율적이고 강력한 대안을 제공합니다.