페이지 수명 주기 API

Philip Walton

오늘날 최신 브라우저는 시스템 리소스가 제한될 때 페이지를 일시 중지하거나 완전히 삭제하는 경우가 있습니다. 향후 브라우저는 전력과 메모리를 적게 소비하도록 이를 사전 예방적으로 실행하려고 합니다. 페이지 수명 주기 API는 페이지가 사용자 환경에 영향을 주지 않고 이러한 브라우저 개입을 안전하게 처리할 수 있도록 수명 주기 후크를 제공합니다. API를 살펴보고 애플리케이션에서 이러한 기능을 구현해야 하는지 확인하세요.

배경

애플리케이션 수명 주기는 최신 운영체제가 리소스를 관리하는 주요 방법입니다. Android, iOS, 최신 Windows 버전에서는 앱을 언제든지 OS에서 시작하고 중지할 수 있습니다. 이를 통해 이러한 플랫폼은 사용자에게 가장 큰 이점을 제공하는 곳에 리소스를 간소화하고 재할당할 수 있습니다.

웹에는 이러한 수명 주기가 없었으며 앱을 무기한으로 활성 상태로 유지할 수 있습니다. 실행 중인 웹페이지가 많으면 메모리, CPU, 배터리, 네트워크와 같은 중요한 시스템 리소스가 과도하게 사용되어 최종 사용자 환경이 좋지 않을 수 있습니다.

웹 플랫폼에는 load, unload, visibilitychange과 같은 수명 주기 상태와 관련된 이벤트가 오랫동안 있었지만 이러한 이벤트를 사용하면 개발자가 사용자 시작 수명 주기 상태 변경에만 응답할 수 있습니다. 웹이 전력이 낮은 기기에서 안정적으로 작동하고 모든 플랫폼에서 전반적으로 리소스를 더 효율적으로 사용하려면 브라우저가 시스템 리소스를 사전 예방적으로 회수하고 재할당할 수 있어야 합니다.

실제로 오늘날 브라우저는 이미 백그라운드 탭의 페이지에 대해 리소스를 절약하기 위한 적극적인 조치를 취하고 있으며, 많은 브라우저 (특히 Chrome)는 전반적인 리소스 사용량을 줄이기 위해 이 작업을 훨씬 더 많이 수행하려고 합니다.

문제는 개발자가 이러한 유형의 시스템 시작 개입을 준비하거나 개입이 발생하고 있음을 알 수 없다는 것입니다. 즉, 브라우저가 보수적이어야 웹페이지가 깨질 위험이 없습니다.

페이지 수명 주기 API는 다음을 통해 이 문제를 해결하려고 시도합니다.

• 웹에서 수명 주기 상태 개념을 도입하고 표준화합니다.
• 브라우저가 숨겨진 탭이나 비활성 탭에서 사용할 수 있는 리소스를 제한할 수 있는 새로운 시스템 시작 상태를 정의합니다.
• 웹 개발자가 이러한 새로운 시스템 시작 상태로의 전환과 이러한 상태로부터의 전환에 응답할 수 있도록 하는 새로운 API와 이벤트를 만듭니다.

이 솔루션은 웹 개발자가 시스템 개입에 탄력적인 애플리케이션을 빌드하는 데 필요한 예측 가능성을 제공하며, 브라우저가 시스템 리소스를 더 적극적으로 최적화할 수 있도록 지원하여 궁극적으로 모든 웹 사용자에게 이점을 제공합니다.

이 게시물의 나머지 부분에서는 새로운 페이지 수명 주기 기능을 소개하고 기존 웹 플랫폼 상태 및 이벤트와 어떤 관련이 있는지 살펴봅니다. 또한 각 상태에서 개발자가 해야 하는 작업과 하지 말아야 하는 작업 유형에 대한 권장사항과 권장사항을 제공합니다.

페이지 수명 주기 상태 및 이벤트 개요

모든 페이지 수명 주기 상태는 개별적이고 상호 배타적입니다. 즉, 페이지는 한 번에 하나의 상태에만 있을 수 있습니다. 페이지의 수명 주기 상태에 대한 대부분의 변경사항은 일반적으로 DOM 이벤트를 통해 관찰할 수 있습니다 (예외는 각 상태에 대한 개발자 권장사항 참고).

페이지 수명 주기 상태와 상태 간 전환을 알리는 이벤트를 설명하는 가장 쉬운 방법은 다이어그램을 사용하는 것입니다.

주

다음 표에서는 각 상태를 자세히 설명합니다. 또한 전후에 발생할 수 있는 가능한 상태와 개발자가 변경사항을 관찰하는 데 사용할 수 있는 이벤트도 나열합니다.

이벤트

브라우저는 많은 이벤트를 디스패치하지만 그중 일부만 페이지 수명 주기 상태의 가능한 변경사항을 나타냅니다. 다음 표에는 수명 주기와 관련된 모든 이벤트가 설명되어 있으며, 전환될 수 있는 상태가 나열되어 있습니다.

* 페이지 수명 주기 API에 의해 정의된 새 이벤트를 나타냅니다.

Chrome 68에 추가된 새로운 기능

이전 차트에는 사용자 시작이 아닌 시스템 시작 상태인 고정됨과 삭제됨이 표시되어 있습니다. 앞서 언급한 것처럼 오늘날 브라우저는 이미 숨겨진 탭을 자체적으로 가끔 고정하고 삭제하지만 개발자는 이 상황을 알 수 없습니다.

이제 Chrome 68에서 개발자는 document의 freeze 및 resume 이벤트를 수신 대기하여 숨겨진 탭이 고정되고 고정 해제되는 시점을 관찰할 수 있습니다.

document.addEventListener('freeze', (event) => {
  // The page is now frozen.
});

document.addEventListener('resume', (event) => {
  // The page has been unfrozen.
});

Chrome 68부터 document 객체에 데스크톱 Chrome의 wasDiscarded 속성이 포함됩니다 (Android 지원은 이 문제에서 추적됨). 숨겨진 탭에 있는 동안 페이지가 삭제되었는지 확인하려면 페이지 로드 시 이 속성의 값을 검사하면 됩니다 (참고: 삭제된 페이지는 다시 사용하려면 새로고침해야 함).

if (document.wasDiscarded) {
  // Page was previously discarded by the browser while in a hidden tab.
}

freeze 및 resume 이벤트에서 중요한 작업과 페이지가 삭제되는 상황을 처리하고 대비하는 방법에 관한 조언은 각 상태에 대한 개발자 권장사항을 참고하세요.

다음 섹션에서는 이러한 새로운 기능이 기존 웹 플랫폼 상태 및 이벤트에 어떻게 적합한지 간략하게 설명합니다.

코드에서 페이지 수명 주기 상태를 관찰하는 방법

활성, 수동, 숨김 상태에서는 기존 웹 플랫폼 API에서 현재 페이지 수명 주기 상태를 결정하는 JavaScript 코드를 실행할 수 있습니다.

const getState = () => {
  if (document.visibilityState === 'hidden') {
    return 'hidden';
  }
  if (document.hasFocus()) {
    return