Vanilla JS 기반 DOM 직접 제어를 통한 Zero-Latency 엔진 구현

Context

React 및 Next.js의 State Update 과정에서 발생하는 Micro-stutters가 e스포츠 유틸리티의 정밀도를 저해하는 병목 지점으로 작용. 프레임워크의 렌더링 오버헤드를 제거하여 물리적 반응 속도만을 측정하기 위한 저지연 구조 필요.

Technical Solution

• Canvas Repaint의 오버헤드를 피하기 위해 Absolute Positioning 기반의 DOM 직접 조작 방식 채택
• Framework State 관리 단계를 생략한 Vanilla JavaScript 기반의 Core Engine 설계로 렌더링 파이프라인 최적화
• stopPropagation() 호출을 통한 Event Propagation 제어로 클릭 이벤트의 오작동 및 False Miss 방지
• Target Bleeding 방지를 위한 Boundary Offset 계산 로직 적용으로 렌더링 영역의 무결성 확보
• 프레임워크 래핑 전 핵심 루프를 Vanilla Event Listener로 구축하여 브라우저 레이턴시 최소화