[JS/HTML] Throttling navigation to prevent the browser from hanging 에러 [크롬브라우저]

이번에 웹페이지 작업을 하다가 페이징을 했는데 버튼을 연속 클릭을 빠르게 하여 페이징을 하게 되면

브라우저 보호를 위해 스로틀링을 적용한다고합니다.

 

 

오류의 발생원인

IPC Flooding Protection

1. Chrome 브라우저는 너무 빠른 페이지 네비게이션을 감지하면 브라우저 보호를 위해 스로틀링을 적용
2. IPC(Inter-Process Communication) flooding을 방지하기 위한 보안 메커니즘
3. 사용자가 페이지네이션 버튼을 빠르게 연속 클릭할 때 발생

 

History API 과다 사용

1. window.history.replaceState({}, '', newUrl);

    페이지 상태 변경마다 History API를 호출 짧은 시간내 많은 History 업데이트 발생

 

해결책

디바운싱 적용

   const debounce = (func, wait) => {

       let timeout;

       return function(...args) {

           clearTimeout(timeout);

           timeout = setTimeout(() => func(...args), wait);

       };

   };

연속된 이벤트를 하나로 묶어서 처리
300ms 대기 시간 설정

 

페이지네이션 최적화

 paginationContainer.addEventListener('click', debounce((e) => {

       // 페이지 전환 로직

   }, 300));

클릭 이벤트에 디바운스 적용
연속 클릭 방지

 

디버깅 팁
Chrome 개발자 도구에서 확인 가능한 오류 메시지
임시로 --disable-ipc-flooding-protection 플래그 사용 가능
콘솔에서 navigation throttling 관련 경고 확인

성능 모니터링
Chrome DevTools의 Performance 탭 활용
페이지네이션 이벤트 발생 빈도 체크
History API 호출 횟수 모니터링
이러한 최적화를 통해 브라우저의 보호 메커니즘을 우회하면서도 안정적인 페이지네이션 기능을 구현할 수 있습니다.