웹 성능 최적화를 위한 PageVisibility API 알아보기(CPU/GPU 사용률 감소🔻 )

pageVisibliity API

웹페이지가 현재 사용자에게 보이는 상태인지 감지할수있는 API
문서가 보이지 않을 때 페이지에서 불필요한 작업이 수행되지 않도록 하여 리소스를 절약하고 성능을 개선하는 데 특히 유용.
사용자가 브라우저를 최소화 하거나 다른탭으로 이동했거나 탭을 보고있거나 했을 경우 API는 visibilitychange 이벤트를 전송해 상태 변경을 알린다 (가시성 상태 추적)

 

속성

document.visibilityState

• visible 페이지가 보여지는 상태
• hidden 페이지가 숨겨진 상태

document.hidden

• true 페이지가 보여지는 상태
• false 페이지가 숨겨진 상태

두 속성의 기능상 차이는 거의 같음. hidden은 단순히 true/false값만 출력함.

 

이점

1. 불필요한 렌더링 감소
2. Cpu/gpu 감소
3. 배터리 감소(노트북/모바일)

 

테스트

테스트 시나리오

• 영상을 재생한 후 10초 뒤 다른 탭으로 이동
• 10초 후 다시 원래 탭으로 복귀

코드 예시

const video = document.getElementById('video');

document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        video.pause();
        console.log('탭 숨김 - 영상 일시정지');
    } else {
        video.play();
        console.log('탭 활성 - 영상 재개');
    }
});

 

비교 해보기

• 일반 영상: Page Visibility API 적용 없이 계속 재생
• API 적용 영상: Page Visibility API로 탭 이동 시 일시정지/재개

네트워크 탭에서 퍼포먼스 측정을 해봤더니 일반영상과 API적용 했을때의 영상과 videoFrameCompositor가 눈에크게 차이가 났다.

💡VideoFrameCompositor
비디오 프레임을 실제로 합성 하는 작업.

탭 활성화 : 매 프레임 마다 화면에 그릴 준비
탭 비활성화: 안보이니까 안그림.

pageVisibility 적용 전

pageVisibility 적용 후

pageVisibility를 적용 전엔 다른 탭 이동했을 시 계속 프레임이 그려지고 있는 걸 확인 할 수 있다.

pageVisibility 적용 전) 일반영상

• 탭이 숨겨저도 계속 비디오 프레임을 렌더링
• 보이지 않는 GPU/CPU 계속 사용
• VideoFrameCompositor 계속 사용

pageVisibility 적용 후) API 적용 영상

• 탭 비활성화시 프레임 렌더링 중단.
• 리소스 절약
• VideoFrameCompositor 대폭 감소

대략 10초로 테스트 했을때 CPU/GPU 사용량이 60~80%는 감소한다.

 

탭이 여러개라면??? 효과가 대폭 상승 한다.

탭이 여러개가 쌓이고 유저들이 대거 진입시 대략 적으로 효과를 얻을 수 있는 시나리오를 AI에이전트에게 물어봤다

✔️100명 사용자, 평균 3-4개 탭 사용

• 총 영상 스트림: 300-400개
• 실제로 보는 영상: 100개 (각자 1개씩)
• 불필요한 스트림: 200-300개

 

✔️리소스 사용량 계산

pageVisibility API 미적용시	pageVisibility API 적용시
-300개 영상 모두 풀 렌더링 -CPU/GPU 최대 부하 -네트워크 대역 폭 300배 사용	-실제 시청 중인 100개만 렌더링 -나머지 200개는 일시정지 -약 67% 리소스 절약