Scheduling Boundary 설계를 통한 16ms Frame Budget 최적화

Context

JavaScript의 Event Loop 구조상 Macrotask의 독점적 실행으로 인한 UI 응답성 저하 발생. 특히 Microtask Queue의 완전 소진 후 Rendering이 수행되는 특성으로 인해 Promise 체이닝만으로는 화면 갱신 기회를 확보할 수 없는 한계 존재.

Technical Solution

• setTimeout(0)을 통한 Macrotask 분절로 브라우저에 Rendering 기회를 제공하는 Scheduling Boundary 설계
• requestAnimationFrame을 활용해 입력 이벤트 발생 주기와 디스플레이 Refresh Rate를 동기화한 Visual Update 최적화
• Frame Budget(16ms) 준수를 위해 과도한 연산 작업을 여러 Frame으로 분산 처리하는 Cooperative Scheduling 적용
• request ID 검증 로직을 통한 비동기 응답의 순서 보장 및 Stale Data 렌더링 방지 구조 구축
• 작업 성격에 따라 즉각적 순차 실행(Promise), 범용적 양보(setTimeout), 시각적 정렬(rAF)로 스케줄링 API를 차별화하여 채택