서론
이전에 백그라운드에서 리소스 낭비 및 무한 롤링을 발생시키는 setInterval의 고질점 때문에 requestAnimationFrame에 대해 소개한 적이 있었는데요,
만약 rAF를 사용하지 못하고 setInterval를 사용해야하는 경우에는 정말 방법이 없는지 검색해보다가 visibilitychange 이벤트에 대해 알게되었습니다.
소개
visibilitychange 이벤트는 브라우저의 Document 객체에서 발생하는 이벤트로, 페이지의 가시성이 변경될 때(ex: 사용자가 탭을 전환하거나 브라우저 창을 최소화할 때) 발생합니다.
이 이벤트는 주로 페이지 표시 여부에 따라 비디오 또는 오디오 플레이어를 일시 중지하거나 다시 시작하는 등의 작업을 수행하는 데 사용됩니다. 추가로 백그라운드 상태에서 무한롤링이 되는 setInterval과 섞어주는 것도 괜찮을 것 같습니다.
const video = document.querySelector('video');
// visibilitychange 이벤트에 대한 이벤트 리스너를 추가합니다.
document.addEventListener('visibilitychange', function() {
// 페이지가 숨겨진 경우 비디오를 일시 중지합니다.
if (document.hidden) {
video.pause();
} else {
// 그렇지 않으면 페이지가 표시되는 경우 비디오를 다시 시작합니다.
video.play();
}
});이벤트가 발생하면 document.hidden 속성을 사용하여 페이지가 숨겨졌는지 확인합니다. 페이지가 숨겨진 경우 video.pause()를 사용하여 비디오를 일시 중지합니다. 페이지가 표시되는 경우 video.play()를 사용하여 비디오를 다시 시작합니다.
visibilitychange 이벤트를 이렇게 사용하면 페이지가 표시되는지 숨겨지는지에 따라 비디오 플레이어를 적절하게 일시 중지하거나 다시 시작할 수 있습니다. 이는 시스템 리소스를 절약하고 페이지에서의 사용자 경험을 향상시키는 데 도움이 됩니다.
❗❗ document.hidden이라는 boolean 값 대신에 document.visibilityState === "visible" or "hidden" 으로 사용해도 된다
👓 참고한 문헌
