MutationObserver 기반 150ms Quiescence 패턴을 통한 SPA 스크롤 복구 최적화

Context

브라우저의 기본 Scroll Restoration은 HTML 파싱 직후 실행되어, 비동기 데이터 로딩 후 DOM이 렌더링되는 SPA 구조에서 위치 불일치 발생. 기존 framework 수준의 nextTick 기반 복구 방식은 async 데이터 페칭 완료 시점을 보장하지 못하는 한계 존재.

Technical Solution

• chrome.storage.local을 활용하여 세션 유지 기간과 상관없이 URL 기반 스크롤 위치를 영속적으로 저장하는 구조 설계
• history.pushState 인터셉터와 popstate 이벤트 리스너를 통한 SPA 내부 페이지 전환 감지 메커니즘 구현
• MutationObserver를 도입하여 DOM 변화를 추적하고, 150ms 동안 추가 변동이 없는 Quiescence 상태를 확인 후 복구 로직 실행
• 저장 시 500ms Debounce 처리를 통해 스크롤 이벤트 발생 시의 불필요한 Storage Write 부하 최소화
• URL 정규화를 통해 Hash 기반 라우팅 시 발생하는 중복 키 생성 문제 해결 및 저장 공간 효율성 확보