피드로 돌아가기
Dev.toFrontend
원문 읽기
Single-Pass 분석으로 5만 단어 처리 시간을 1ms대로 단축
How We Built a Real-Time Text Analysis Engine That Processes Every Keystroke in Under 1ms
AI 요약
Context
매 키스트로크마다 20개 이상의 메트릭을 실시간 계산해야 하는 환경에서 기존의 독립적 함수 호출 방식 사용. 텍스트 규모 증가에 따른 반복적인 전체 문자열 스캔과 Regex 오버헤드로 인해 5,000단어 초과 시 16ms 프레임 버짓을 초과하는 Jank 현상 발생.
Technical Solution
- 개별 메트릭 함수를 제거하고 단 한 번의 루프로 모든 지표를 추출하는 Single-Pass 분석 구조 설계
- Regex 기반의 분할 방식을 배제하고 charCodeAt을 활용한 단일 CPU 명령 단위의 문자 분류 처리
- 공백, 개행, 문장 종료 문자를 실시간으로 판별하여 상태 머신 방식으로 단어 및 문장 경계 인식
- 약어 및 소수점 오판단을 방지하기 위한 Next-Character Look-ahead 기반의 Abbreviation Guard 로직 적용
- 사전 기반 조회를 포기하고 Heuristic 기반의 Syllable Counting을 채택하여 처리 속도 극대화
- 메모리 관리 효율화를 위해 분석마다 Map 객체를 새로 생성하여 GC에 위임하는 Stateless 구조 채택
실천 포인트
- 다중 메트릭 추출 시 개별 Loop 대신 Single-Pass 구조 검토 - 빈번한 문자열 조작 시 Regex 대신 charCode 기반의 직접 비교 적용 - 실시간 인터렉션 성능 확보를 위해 16ms 프레임 버짓 내 연산 수행 여부 측정 - 성능 병목 지점 파악 전까지는 과도한 최적화보다 기본 구현에 집중