Page Visibility API

Page Visibility API는 웹 개발자가 현재 페이지가 사용자에게 표시되는지 또는 숨겨지는지 여부를 결정할 수 있는 JavaScript API입니다. 이 API는 개발자가 사용자와 페이지의 상호 작용을 기반으로 웹 사이트의 동작을 최적화하려는 다양한 시나리오에 유용합니다.

​

다음은 Page Visibility API를 사용하는 방법을 보여주는 샘플 코드 스니펫입니다.

​

// Check for the Page Visibility API

if (typeof document.hidden !== "undefined") {

// Add a listener for visibilitychange events

document.addEventListener("visibilitychange", function() {

if (document.hidden) {

// The page is hidden, pause any ongoing animations, videos, or other content

} else {

// The page is visible, resume any paused content

}

});

}

​

이 코드에서는 먼저 현재 브라우저에서 Page Visibility API를 사용할 수 있음을 나타내는 `document.hidden` 속성이 정의되어 있는지 확인합니다. 그런 다음 페이지의 가시성이 변경될 때(예: 사용자가 탭을 전환하거나 창을 최소화할 때) 발생하는 `visibilitychange` 이벤트에 대한 이벤트 리스너를 추가합니다. 이벤트 리스너 내에서 문서가 현재 숨겨져 있음을 나타내는 `document.hidden`이 true인지 확인하고 진행 중인 애니메이션, 비디오 또는 기타 콘텐츠를 일시 중지합니다. `document.hidden`이 false이면 일시 중지된 콘텐츠를 다시 시작합니다.

​

Page Visibility API의 또 다른 일반적인 사용 사례는 성능을 개선하고 배터리 사용량을 줄이기 위해 페이지가 숨겨져 있을 때 발생하는 처리량을 줄이는 것입니다. 다음은 이를 수행하는 방법의 예입니다.

​

// Check for the Page Visibility API

if (typeof document.hidden !== "undefined") {

// Add a listener for visibilitychange events

document.addEventListener("visibilitychange", function() {

if (document.hidden) {

// The page is hidden, stop any ongoing processing

stopProcessing();

} else {

// The page is visible, resume processing

resumeProcessing();

}

});

}

​

function stopProcessing() {

// Stop any ongoing processing, such as timers or animations

clearInterval(timerId);

cancelAnimationFrame(animationId);

}

​

function resumeProcessing() {

// Resume any paused processing

timerId = setInterval(doSomething, 1000);

animationId = requestAnimationFrame(doSomethingElse);

}

​

function doSomething() {

// Perform some processing

}

​

function doSomethingElse() {

// Perform some other processing

}

​

이 예제에서는 각각 진행 중인 처리를 중지하고 다시 시작하는 두 개의 함수 `stopProcessing()` 및 `resumeProcessing()`을 정의합니다. `Visibilitychange` 이벤트에 대한 이벤트 리스너 내에서 페이지가 표시되는지 또는 숨겨지는지에 따라 이러한 함수를 호출합니다. 마지막으로 진행 중인 처리를 일시 중지하고 다시 시작하는 아이디어를 설명하는 데 사용하는 몇 가지 샘플 처리 함수 `doSomething()` 및 `doSomethingElse()`를 정의합니다.