Page Visibility API

백그라운드 탭 최적화 기술

Page Visibility API는 사용자가 현재 브라우저 탭을 보고 있는지(가시성) 여부를 감지하는 API입니다. 사용자가 다른 탭으로 이동하거나 브라우저를 최소화하면 애플리케이션은 이를 감지하여 불필요한 리소스 소모를 막을 수 있습니다.

주요 활용 사례:
- 화면에서 벗어났을 때 비디오 재생 자동 일시 정지
- 백그라운드 탭에서 불필요한 데이터 폴링(API 반복 요청) 및 애니메이션 중단
- 사용자가 페이지에 머문 실제 활성 시간(Active Time) 분석

// Page Visibility API 활용 예제: 비디오 자동 제어

// 1. 가시성 상태 변경 이벤트 리스너 등록
document.addEventListener("visibilitychange", function() {
  
  // HTML 비디오 요소 가져오기 (가정)
  // const video = document.getElementById('myVideo');
  
  if (document.visibilityState === 'visible') {
    console.log("사용자가 탭으로 돌아왔습니다.");
    // if (video) video.play(); // 자동 재생 재개
  } else {
    console.log("사용자가 탭을 벗어났습니다. (백그라운드 상태)");
    // if (video) video.pause(); // 자동 일시 정지
    // 타이머나 무거운 애니메이션 일시 정지 처리
  }
});

console.log("현재 페이지 가시성 상태:", document.visibilityState);