탭 안 볼 때 폴링 멈추기, visibilitychange로 요청 절반 줄이기

관리 화면에 30초 간격 폴링을 걸어두면 마음이 편해요. 데이터가 알아서 최신으로 유지되니까요. 그런데 다른 탭에서 일하는 동안에도 그 요청이 꼬박꼬박 나가고 있다는 사실, 알고 계셨나요?

안 보는 화면이 시간당 120회를 요청하고 있었어요

직접 만들어 보니 30초 간격 폴링은 시간당 120회 요청이에요. 하루 8시간 탭을 열어두면 960회가 되고요. 저는 개발자 도구의 네트워크 탭을 열어 보고 나서야 알았어요. 화면을 보지도 않는 시간에 나간 요청이 절반이 넘더라고요.

브라우저가 백그라운드 탭의 타이머를 조금 늦추기도 하지만, 폴링 요청 자체를 막아 주지는 않아요. 멈추는 건 우리 몫이에요.

visibilitychange 리스너 하나면 돼요

Page Visibility API는 웹 표준이라 별도 라이브러리가 필요 없어요. 탭이 보이는 상태인지는 document.visibilityState로 확인해요.

let timer = null;
 
function startPolling() {
  if (timer) return;
  fetchData(); // 복귀 직후 1회 즉시 갱신
  timer = setInterval(fetchData, 30_000);
}
 
function stopPolling() {
  clearInterval(timer);
  timer = null;
}
 
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") startPolling();
  else stopPolling();
});
 
startPolling();

리스너 1개, 20줄 안쪽이에요. React라면 같은 로직을 useEffect 안에 두고 정리 함수에서 stopPolling을 호출하면 돼요.

복귀했을 때 한 번 바로 불러 주세요

적용해 봤더니 어색한 순간이 하나 있었어요. 탭에 돌아왔는데 다음 주기까지 화면이 옛날 데이터로 남아 있는 거예요. 그래서 startPolling 첫 줄에서 즉시 한 번 불러오게 했어요. 테스트해 보면 복귀하는 순간 화면이 바로 갱신돼서, 폴링이 멈췄었다는 사실을 사용자는 눈치채지 못해요.

돌려 보니 탭을 안 보는 시간만큼 요청이 그대로 줄었어요. 혼자 서버 비용까지 감당하는 입장이면 체감이 커요. 저도 플랜비(plan-b)의 회비 현황 같은 운영 화면을 만들면서, 아무도 안 보는 요청부터 줄이는 게 제일 싼 최적화라는 걸 배웠어요.

폴링 간격을 줄일지 고민하기 전에, 안 보는 동안 멈추는 것부터 해보세요. 요청 수는 줄고 사용자는 아무 차이도 못 느껴요.