이 페이지는 Cloud Translation API를 통해 번역되었습니다.

페이지 수명 주기 API

Philip Walton

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

오늘날의 최신 브라우저에서는 시스템 리소스가 제한되어 있습니다 향후 브라우저에서는 전력과 메모리를 덜 소모합니다. Page Lifecycle API 페이지에서 이러한 브라우저를 안전하게 처리할 수 있도록 수명 주기 후크를 제공합니다. 개입하는 방법을 배웁니다. API를 살펴보고 애플리케이션에서 이러한 기능을 구현해야 하는지 확인할 수 있습니다

배경

애플리케이션 수명 주기는 최신 운영체제에서 리소스를 배포합니다 Android, iOS 및 최신 Windows 버전에서 앱을 시작하고 중지시킬 수 있습니다 이를 통해 이러한 플랫폼에서는 사용자에게 가장 이익이 되는 곳에 리소스를 재할당해야 합니다.

지금까지 웹에서는 이러한 수명 주기가 없었으며, 앱을 계속 유지할 수 있습니다. 무기한 살아있는 것을 볼 수 있습니다. 다수의 웹페이지를 실행하는 경우 중요한 시스템은 메모리, CPU, 배터리, 네트워크와 같은 리소스가 초과 구독될 수 있고, 부정적인 최종 사용자 경험으로 이어질 수 있습니다

웹 플랫폼에는 수명 주기 상태와 관련된 이벤트가 오랫동안 있었지만 예: load, unload 및 visibilitychange 이러한 이벤트는 개발자가 사용자가 시작한 수명 주기 상태 변경에 대응할 수 있습니다 웹 활용 더 안정적으로 작동하도록 할 수 있으며, 일반적으로 브라우저를 사용하려면 사전에 시스템을 회수하고 재할당하는 방법이 필요합니다. 리소스를 배포합니다

실제로 오늘날의 브라우저는 이미 리소스를 절약하기 위한 적극적인 조치를 취하고 있습니다. 을 사용하고 많은 브라우저 (특히 Chrome)에서 전체 리소스 공간을 줄일 수 있었습니다.

문제는 개발자가 이런 종류의 공격에 대비할 방법이 없다는 것입니다. 개입하거나 그 일이 발생하고 있다는 것을 인지할 수도 있습니다. 다시 말해 브라우저는 웹페이지를 보수적이거나 중단시킬 위험이 있어야 합니다.

Page Lifecycle API 다음과 같은 방법으로 이 문제를 해결하려고 합니다.

웹의 수명 주기 상태 개념 소개 및 표준화
브라우저가 숨겨진 탭이나 비활성 탭에서 사용할 수 있는 리소스입니다.
웹 개발자가 응답할 수 있는 새 API 및 이벤트 생성 상태 간에 자동 전환됩니다.

이 솔루션은 웹 개발자가 프로덕션 환경에서 복원력이 우수하며, 브라우저가 더 많은 시스템 리소스를 적극적으로 최적화하여 궁극적으로 모든 웹 사용자에게 혜택을 제공합니다.

이 게시물의 나머지 부분에서는 새로운 페이지 수명 주기 기능을 소개합니다. 모든 기존 웹 플랫폼 상태와 어떤 관련이 있는지 살펴봅니다. 사용할 수 있습니다. 또한 각 유형의 권장사항과 권장사항을 해야 하거나 해서는 안 되는 작업의 비율

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

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

아마도 페이지 수명 주기 상태뿐만 아니라 이들 간의 전환을 나타내는 이벤트를 다이어그램으로 나타내면 다음과 같습니다.

이 문서 전체에 설명된 상태와 이벤트 흐름을 시각적으로 나타낸 것입니다. — Page Lifecycle API 상태 및 이벤트 흐름

주

다음 표에서는 각 상태를 자세히 설명합니다. 또한 kubectl run을 사용하여 상태를 지정할 수 있으며 개발자가 사용할 수 있습니다

주	설명
활성	페이지가 표시되고 다음 사항이 있는 경우 페이지는 활성 상태입니다. 입력 포커스 가능한 이전 상태: 수동적 (`focus` 이벤트를 통해) 고정 (`resume` 이벤트를 통해 `pageshow` 이벤트) 가능한 다음 상태: 수동적 ( `blur` 이벤트를 통해)
수동	페이지가 표시되고 작동하는 경우 페이지가 수동 상태입니다. 입력 포커스가 없습니다. 가능한 이전 상태: 활성 (`blur` 이벤트를 통해) 숨김 ( `visibilitychange` 이벤트) 고정 (`resume` 이벤트를 통해 `pageshow` 이벤트) 가능한 다음 상태: 활성 (`focus` 이벤트를 통해) 숨김 ( `visibilitychange` 이벤트)
숨김	페이지가 표시되지 않고 표시되지 않으면 숨김 상태가 됩니다. 계정이 동결, 삭제 또는 해지된 경우). 가능한 이전 상태: 수동적 ( `visibilitychange` 이벤트) 고정 (`resume` 이벤트를 통해 `pageshow` 이벤트) 가능한 다음 상태: 수동적 ( `visibilitychange` 이벤트) 고정 (`freeze` 이벤트를 통해) 삭제됨 (실행된 이벤트 없음) 해지됨 (실행된 이벤트 없음)
고정	고정 상태에서 브라우저는 <ph type="x-smartling-placeholder"></ph> 멈출 수 있음 <ph type="x-smartling-placeholder"></ph> 작업을 태스크 큐에 계속 있어야 합니다. 즉, JavaScript 타이머 및 가져오기 콜백이 실행되지 않습니다. 이미 실행 중 완료할 수 있습니다 (무엇보다도 `freeze` 콜백)에서 호출되지만, 실행 가능한 시간 등입니다. 브라우저에서 CPU/배터리/데이터 사용량을 보존하기 위해 페이지를 고정합니다. 그들은 더 빠르게 문제를 해결할 수 있는 <ph type="x-smartling-placeholder"></ph> 뒤로-앞으로 탐색 — 전체 페이지가 필요하지 않음 새로고침합니다. 가능한 이전 상태: 숨김 (`freeze` 이벤트를 통해) 가능한 다음 상태: 활성 (`resume` 이벤트를 통해, 그런 다음 `pageshow` 이벤트) 수동적 (`resume` 이벤트를 통해 `pageshow` 이벤트) 숨김 (`resume` 이벤트 사용) 삭제됨 (실행된 이벤트 없음)
종료됨	페이지가 시작되면 해지 상태가 됩니다. 브라우저에서 로드 취소되고 메모리에서 지워집니다. 아니요 <ph type="x-smartling-placeholder"></ph> 새 작업이 이 상태에서 시작될 수 있고 진행 중인 작업은 죽임을 뜻합니다. 가능한 이전 상태: 숨김 (`pagehide` 이벤트를 통해) 가능한 다음 상태: 없음
삭제됨	페이지가 삭제됨 상태가 되면 리소스를 절약할 수 있습니다. 작업, 이벤트 콜백 또는 모든 종류의 JavaScript가 이 상태에서 실행될 수 있습니다. 일반적으로 삭제가 리소스 제약 조건 하에서 발생할 수 있으며 불가능에 가깝습니다. discarded 상태에서 탭 자체를 삭제합니다. (탭 제목, 파비콘 포함) 일반적으로 사용자에게 표시됩니다. 표시될 수 있습니다. 가능한 이전 상태: 숨김 (실행된 이벤트 없음) 고정 (실행된 이벤트 없음) 가능한 다음 상태: 없음

이벤트

브라우저는 많은 이벤트를 보내지만 그 중 극히 일부만이 페이지 수명 주기 상태가 변경될 수 있음을 나타냅니다. 다음 표에는 모든 이벤트가 요약되어 있습니다. 전환될 수 있는 상태를 나열합니다.

이름	세부정보
`focus`	DOM 요소가 포커스를 받았습니다. 참고: `focus` 이벤트는 반드시 상태 변경을 알립니다 다음 경우에만 상태 변경 신호를 보냅니다. 이전에는 해당 페이지에 입력 포커스가 없었습니다. 가능한 이전 상태: 수동적 가능한 현재 상태: 활성
`blur`	DOM 요소가 포커스를 잃었습니다. 참고: `blur` 이벤트는 반드시 상태 변경을 알립니다 다음 경우에만 상태 변경 신호를 보냅니다. 페이지에 더 이상 입력 포커스가 없는 경우 (즉, 페이지의 한 요소에서 다른 요소로 포커스 이동). 가능한 이전 상태: 활성 가능한 현재 상태: 수동적
`visibilitychange`	문서의 <ph type="x-smartling-placeholder"></ph> `visibilityState` 값이 변경되었습니다. 이렇게 하면 사용자가 새 페이지로 이동하거나, 탭을 전환하거나, 탭을 닫을 때 브라우저를 최소화 또는 닫거나, 모바일 운영체제에서 앱을 전환 있습니다 가능한 이전 상태: 수동적 숨김 가능한 현재 상태: 수동적 숨김
<ph type="x-smartling-placeholder"></ph> `freeze` *	페이지가 방금 정지되었습니다. 모든 문자 <ph type="x-smartling-placeholder"></ph> Freezable 작업은 시작되지 않습니다. 가능한 이전 상태: 숨김 가능한 현재 상태: 고정
<ph type="x-smartling-placeholder"></ph> `resume` *	브라우저에서 정지된 페이지를 재개했습니다. 가능한 이전 상태: 고정 가능한 현재 상태: 활성 (이후 `pageshow` 이벤트) 수동적 (이후 `pageshow` 이벤트) 숨김
`pageshow`	세션 기록 항목을 순회하고 있습니다. 이는 완전히 새로운 페이지 로드일 수도 있고 뒤로-앞으로 캐시. 페이지 뒤로-앞으로 캐시에서 가져온 경우 `persisted` 속성이 `true`, 그렇지 않은 경우 `false`입니다. 가능한 이전 상태: 고정 (`resume`) 이벤트도 발생함) 가능한 현재 상태: 활성 수동적 숨김
`pagehide`	세션 기록 항목을 순회하고 있습니다. 사용자가 다른 페이지로 이동 중이며 브라우저에서 현재 페이지를 뒤로-앞으로 캐시가 없으면 이벤트의 `persisted` 속성이 `true`입니다. `true`인 경우 페이지가 고정 상태가 아니어야 합니다. 그렇지 않으면 종료 상태로 전환됩니다. 가능한 이전 상태: 숨김 가능한 현재 상태: 고정 (`event.persisted`은 true, `freeze` 이벤트 팔로우) 해지됨 (`event.persisted`은 거짓, `unload` 이벤트 팔로우)
`beforeunload`	창, 문서 및 리소스가 언로드됩니다. 문서가 계속 표시되며 여기에서 일정을 취소할 수 있습니다. 있습니다. 중요: `beforeunload` 이벤트 저장되지 않은 변경사항을 사용자에게 알리는 데만 사용해야 합니다. 일단 변경사항이 저장되면 이벤트를 삭제해야 합니다. 결코 페이지에 무조건 추가할 경우 실적이 저하될 수 있습니다. 경우에 따라 다릅니다. 기존 API 섹션을 참조하세요. 가능한 이전 상태: 숨김 가능한 현재 상태: 해지됨
`unload`	페이지를 로드 취소 중입니다. 경고: `unload` 이벤트를 사용하는 것은 권장되지 않습니다. 경우에 따라 성능이 저하될 수 있습니다. 자세한 내용은 기존 API 섹션 참조하세요. 가능한 이전 상태: 숨김 가능한 현재 상태: 해지됨

* Page Lifecycle API에서 정의한 새 이벤트를 나타냅니다.

Chrome 68에 추가된 새로운 기능

이전 차트는 시스템에서 시작된 것이 아니라 시스템에서 시작된 두 가지 상태를 보여줍니다. 사용자가 시작한 경우: 고정 및 삭제됨 앞서 언급했듯이 오늘날의 브라우저는 이미 가끔 숨겨진 탭 (자율에 따라)이지만, 개발자는 확인할 수 있습니다

Chrome 68에서는 이제 개발자가 숨겨진 탭이 정지되고 freeze를 수신하여 고정 해제됨 및 resume 이벤트(document)

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

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

Chrome 68부터 document 객체에는 이제 다음이 포함됩니다. wasDiscarded 속성 (이 문제에서 Android 지원이 추적됨)을 사용 설정해야 합니다. 숨겨진 상태에서 페이지가 삭제되었는지 여부를 판단하기 위해 탭에서 이 속성의 값을 검사할 수 있습니다 (참고: 삭제한 페이지는 다시 사용하려면 새로고침해야 함).

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

freeze 및 resume에서 중요한 작업에 관한 조언 삭제하는 페이지 처리 및 준비 방법에 대해 자세히 알아보려면 주별 개발자 권장사항

다음 섹션에서는 이러한 새로운 기능이 Google Cloud의 기존 웹 플랫폼 상태 및 이벤트입니다.

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

활성, 수동, 숨김 상태 현재 활성 상태를 결정하는 자바스크립트 코드를 실행할 수 있습니다. 기존 웹 플랫폼 API의 페이지 수명 주기 상태

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

위의 고정 및 종료 상태는 각 이벤트 리스너에서만 감지될 수 있습니다. (freeze 및 pagehide) 있습니다.

상태 변경사항을 관찰하는 방법

이전에 정의한 getState() 함수를 기반으로 모든 페이지를 관찰할 수 있습니다. 수명 주기 상태가 다음 코드로 변경됩니다.

// Stores the initial state using the `getState()` function (defined above).
let state = getState();

// Accepts a next state and, if there's been a state change, logs the
// change to the console. It also updates the `state` value defined above.
const logStateChange = (nextState) => {
  const prevState = state;
  if (nextState !== prevState) {
    console.log(`State change: ${prevState} >>> ${nextState}`);
    state = nextState;
  }
};

// Options used for all event listeners.
const opts = {capture: true};

// These lifecycle events can all use the same listener to observe state
// changes (they call the `getState()` function to determine the next state).
['pageshow', 'focus', 'blur', 'visibilitychange', 'resume'].forEach((type) => {
  window.addEventListener(type, () => logStateChange(getState()), opts);
});

// The next two listeners, on the other hand, can determine the next
// state from the event itself.
window.addEventListener('freeze', () => {
  // In the freeze event, the next state is always frozen.
  logStateChange('frozen');
}, opts);

window.addEventListener('pagehide', (event) => {
  // If the event's persisted property is `true` the page is about
  // to enter the back/forward cache, which is also in the frozen state.
  // If the event's persisted property is not `true` the page is
  // about to be unloaded.
  logStateChange(event.persisted ? 'frozen' : 'terminated');
}, opts);

이 코드는 다음 세 가지 작업을 실행합니다.

getState() 함수를 사용하여 초기 상태를 설정합니다.
다음 상태를 받아들일 수 있는 함수를 정의하고, 변경사항이 있는 경우 콘솔에 상태 변경사항을 기록합니다
추가 캡처 필요한 모든 수명 주기 이벤트를 위한 이벤트 리스너이며 다음 상태를 전달하는 logStateChange()입니다.

코드에서 한 가지 주의할 점은 모든 이벤트 리스너가 window에게 전달되고 모두 통과 {capture: true} 여기에는 다음과 같은 이유가 있습니다.

모든 페이지 수명 주기 이벤트의 타겟이 동일한 것은 아닙니다. pagehide 및 pageshow는 window에서 실행됩니다. visibilitychange, freeze, resume는 document에서 실행되고 focus 및 blur는 각각의 DOM 요소를 사용합니다.
이러한 일정은 대부분 풍선으로 표시되지 않습니다. 즉, 이벤트 리스너를 공통 상위 요소에 캡처하지 않고 있습니다.
캡처 단계는 타겟 또는 버블 단계 전에 실행되므로 거기에 있는 리스너는 다른 코드가 취소하기 전에 리스너가 실행되도록 합니다.

주별 개발자 권장사항

개발자는 페이지 수명 주기 상태를 이해하고 그리고 코드에서 객체를 관찰하는 방법을 알아야 합니다. 주로 페이지의 상태에 따라 달라집니다.

예를 들어, 일시적인 알림을 표시하는 것은 분명히 말이 되지 않습니다. 페이지가 숨겨진 상태에 있는 경우 사용자에게 표시됩니다. 이 예는 그다지 명확하지 않고 가치가 있는 다른 권장사항도 있습니다. 있습니다.

주	개발자 권장사항
`Active`	활성 상태는 사용자에게 가장 중요한 시간이므로 페이지를 표시하는 데 가장 중요한 시기는 <ph type="x-smartling-placeholder"></ph> 자동 확장 소재를 사용합니다. 기본 스레드를 차단할 수 있는 UI 외 작업의 우선순위를 낮춰야 합니다. <ph type="x-smartling-placeholder"></ph>에 유휴 기간 또는 웹 워커에 오프로드할 수도 있습니다.
`Passive`	수동적 상태에서는 사용자가 페이지와 상호작용하지 않습니다. 여전히 볼 수 있습니다. 즉, UI 업데이트 및 애니메이션은 이러한 업데이트가 발생하는 시점은 덜 중요합니다. 페이지가 활성에서 수동으로 변경되면 저장되지 않은 애플리케이션 상태를 유지하는 것이 좋습니다
`Hidden`	페이지가 수동에서 숨김으로 변경되면 사용자가 새로고침될 때까지 다시 상호작용하지 않을 가능성이 있습니다. 숨김으로의 전환은 마지막 상태 변경이기도 합니다. 개발자들이 안정적으로 관찰할 수 있는 것이죠 (특히 이는 사용자가 탭이나 브라우저 앱 자체를 닫을 수 있고 `beforeunload`, `pagehide`, `unload` 이벤트가 실행되지 않음). 즉, hidden 상태를 지정할 수 있습니다. 즉, 저장되지 않은 애플리케이션 상태를 유지합니다. 전송되지 않은 분석 데이터를 전송할 수 있습니다 또한 UI 업데이트는 사용자가 원하지 않는 작업은 모두 중지해야 합니다. 실행되는 것입니다
`Frozen`	고정 상태에서 <ph type="x-smartling-placeholder"></ph> 중지 가능한 작업을 <ph type="x-smartling-placeholder"></ph> 태스크 큐는 페이지가 고정 해제될 때까지 정지되며, 발생하지 않습니다 (예: 페이지가 삭제된 경우). 페이지가 숨김에서 고정으로 변경되면 타이머를 중지하거나 같은 출처에서 열려 있는 다른 탭에 영향을 주거나 브라우저가 페이지를 뒤로-앞으로 캐시를 제공합니다. 특히 다음 작업을 수행하는 것이 중요합니다. 열려 있는 항목 모두 닫기 <ph type="x-smartling-placeholder"></ph> IndexedDB 연결 닫기 <ph type="x-smartling-placeholder"></ph> BroadcastChannel 연결을 사용할 수 있습니다. 활성 닫기 WebRTC 연결 네트워크 폴링을 중지하거나 열려 있는 항목을 닫습니다. <ph type="x-smartling-placeholder"></ph> Web Socket 연결을 위한 것입니다. 보류된 을(를) 해제합니다. 웹 잠금을 참고하세요. 또한 동적 뷰 상태 (예: 스크롤 위치)를 (무한 목록 보기에서) <ph type="x-smartling-placeholder"></ph> `sessionStorage` (또는 다음을 통한 IndexedDB `commit()`)를 이스케이프 처리합니다. 나중에 다시 로드할 수 있습니다 페이지가 고정에서 숨김으로 전환되면 닫은 연결을 다시 열거나 폴링을 다시 시작할 수 있습니다. 중지됩니다.
`Terminated`	일반적으로 페이지가 전환될 때 별도의 조치를 취할 필요가 없습니다. 종료 상태로 전환됩니다. 사용자 작업의 결과로 페이지가 로드 취소되는 것은 항상 종료되기 전에 숨김 상태를 거쳐 여기서 hidden 상태는 세션 종료 로직 (예: 애플리케이션 상태 유지 및 애널리틱스에 보고)은 확인할 수 있습니다 또한 숨겨진 상태)가 될 수 있다는 것을 개발자가 깨닫는 것이 매우 중요합니다. 종료 상태로의 전환이 안정적으로 이루어질 수 없음 많은 경우 (특히 모바일에서) 감지되므로 이러한 문제에 의존하는 개발자는 종료 이벤트 (예: `beforeunload`, `pagehide`, `unload`)에서 데이터가 손실될 수 있습니다.
`Discarded`	개발자는 discarded 상태를 확인할 수 없습니다. 페이지 로드 시간을 단축할 수 있습니다. 페이지는 일반적으로 리소스 제약조건하에서 삭제되고, 허용되도록 페이지를 고정 해제하기만 하면 실행 스크립트를 실행하는 것이 대부분의 경우 따라서 숨김에서 고정으로 변경한 다음 페이지가 로드될 때 삭제된 페이지를 복원하면 `document.wasDiscarded` 확인 중.

다시 한 번 말씀드리지만 수명 주기 이벤트의 안정성과 순서는 모든 브라우저에 일관되게 구현되므로 도움말을 따르는 가장 쉬운 방법은 는 PageLifecycle.js)에 액세스할 수 있습니다.

피해야 할 기존 수명 주기 API

다음 이벤트는 가능한 한 피해야 합니다.

unload 이벤트

경고: 최신 브라우저에서 unload 이벤트를 사용하지 마세요.

많은 개발자가 unload 이벤트를 보장된 콜백으로 취급하고 다음과 같이 사용합니다. 상태를 저장하고 분석 데이터를 전송하기 위해 세션 종료 신호가 필요하지만, 이렇게 하는 것은 은 특히 모바일에서 매우 불안정합니다. unload 이벤트는 탭에서 탭을 닫는 등 여러 일반적인 로드 취소 상황에서 실행 또는 앱 전환기에서 브라우저 앱을 닫을 수 있습니다.

그렇기 때문에 항상 세션의 시점을 결정하는 visibilitychange 이벤트 은닉 상태를 고려하고 앱 및 사용자 데이터를 절약할 수 있는 마지막 안정적인 시간.

또한 다음을 통해 등록된 unload 이벤트 핸들러만 있어도 됩니다. onunload 또는 addEventListener())로 인해 브라우저에서 뒤로-앞으로 캐시에 페이지를 넣으면 속도가 빨라집니다. 정의할 수 있습니다

모든 최신 브라우저에서는 항상 pagehide 이벤트를 사용하여 가능한 페이지 언로드 (즉, unload 이벤트가 아닌 종료됨 상태). 만약 Internet Explorer 버전 10 이하를 지원해야 하는 경우 pagehide 이벤트를 감지하고 브라우저에서 지원하지 않는 경우에만 unload를 사용합니다. pagehide:

const terminationEvent = 'onpagehide' in self ? 'pagehide' : 'unload';

window.addEventListener(terminationEvent, (event) => {
  // Note: if the browser is able to cache the page, `event.persisted`
  // is `true`, and the state is frozen rather than terminated.
});

beforeunload 이벤트

주의: beforeunload 리스너를 무조건 추가하거나 세션 종료 신호를 수신해야 합니다. 사용자가 저장하지 않은 작업이 있는 경우에만 추가하고 작업만 저장됩니다.

beforeunload 이벤트에는 unload 이벤트와 비슷한 문제가 있습니다. 이전에는 beforeunload 이벤트가 있으면 페이지가 뒤로-앞으로 캐시를 사용할 수 있어야 합니다. 최신 브라우저 이 제한이 적용되지 않습니다. 일부 브라우저는 예방 조치로 인해 페이지를 뒤로-앞으로 넣으려고 할 때 beforeunload 이벤트 이는 이벤트가 세션 종료 신호로서 안정적이지 않음을 의미합니다. 또한 일부 브라우저 (Chrome 포함)에서는 beforeunload 이벤트를 허용하기 전에 페이지에서 사용자 상호작용 필요 안정성에 더 큰 영향을 미칩니다

beforeunload와 unload의 한 가지 차이점은 beforeunload의 합법적인 사용. 예를 들어 사용자에게 저장되지 않은 변경사항이 있는 경우 페이지 로드 취소를 계속하면 변경사항을 잃게 됩니다.

beforeunload를 사용해야 할 타당한 이유가 있으므로 다음을 수행하는 것이 좋습니다. 사용자에게 저장되지 않은 변경사항이 있는 경우에만 beforeunload 리스너를 추가하고 저장된 직후에 삭제하세요.

즉, beforeunload 리스너를 추가하므로 이렇게 하면 안 됩니다. 무조건적으로):

addEventListener('beforeunload', (event) => {
  // A function that returns `true` if the page has unsaved changes.
  if (pageHasUnsavedChanges()) {
    event.preventDefault();

    // Legacy support for older browsers.
    return (event.returnValue = true);
  }
});

대신 이렇게 해야 합니다. beforeunload 리스너가 가 필요하며 필요 없는 경우 삭제합니다.

const beforeUnloadListener = (event) => {
  event.preventDefault();
  
  // Legacy support for older browsers.
  return (event.returnValue = true);
};

// A function that invokes a callback when the page has unsaved changes.
onPageHasUnsavedChanges(() => {
  addEventListener('beforeunload', beforeUnloadListener);
});

// A function that invokes a callback when the page's unsaved changes are resolved.
onAllChangesSaved(() => {
  removeEventListener('beforeunload', beforeUnloadListener);
});

FAQ

'로드 중' 메시지가 무엇인가요?

Page Lifecycle API는 상태를 불연속적이고 상호 배타적인 상태를 정의합니다. 페이지는 활성, 수동 또는 숨김 상태로 로드될 수 있고 로드가 끝나기 전에 상태를 변경하거나 종료할 수 있기 때문에 별도의 로드 상태는 이 패러다임 내에서 의미가 없습니다.

숨겨진 페이지에서도 중요한 작업을 합니다. 페이지가 정지되거나 삭제되지 않도록 하려면 어떻게 해야 하나요?

페이지가 실행되는 동안 정지되어서는 안 되는 많은 정당한 이유가 있습니다. 숨겨진 상태에 있을 수 있습니다. 가장 명백한 예는 음악을 재생하는 앱입니다.

또한 Chrome이 페이지를 삭제하고 제출되지 않은 사용자 입력이 있는 양식이 포함되어 있거나 페이지가 로드 취소될 때 경고를 표시하는 beforeunload 핸들러

당분간 Chrome은 페이지를 삭제할 때 보수적일 것입니다. 사용자에게 영향을 미치지 않을 것으로 확신하는 경우에만 이를 실행하세요. 예를 들어 은닉 상태에서는 극단적인 리소스 제약이 있지 않는 한 폐기해야 합니다.

오디오 재생 중
WebRTC 사용
표 제목 또는 파비콘 업데이트
알림 표시
푸시 알림 보내기

탭을 안전하게 사용할 수 있는지 판단하는 데 사용되는 현재 목록 기능 자세한 내용은 동결 및 삭제에 대한 휴리스틱스를 참조하세요. 삭제 할 수 있습니다.

를 탭합니다. 뒤로-앞으로 캐시란 무엇인가요?

뒤로-앞으로 캐시는 탐색 최적화는 일부 브라우저에서 구현되어 뒤로 및 더 빠르게 만듭니다.

사용자가 페이지를 벗어날 때 브라우저에서 해당 페이지의 버전을 고정합니다. 다시 시작할 수 있도록 하여 사용자가 다시 시작하는 경우 뒤로 또는 앞으로 버튼을 사용하지 않습니다. unload 이벤트 핸들러로 인해 이 최적화가 불가능해집니다.

모든 인텐트와 용도에서 이러한 고정은 CPU/배터리를 절약하기 위해 브라우저 정지 작업을 수행합니다. 그렇기 때문에 고정 수명 주기 상태의 일부로 간주됩니다.

고정 또는 종료된 상태에서 비동기 API를 실행할 수 없는 경우 데이터를 IndexedDB에 저장하려면 어떻게 해야 하나요?

정지 및 종료된 상태에서 동결 가능한 작업 페이지의 태스크 큐에서 정지되며 이는 IndexedDB와 같은 비동기 및 콜백 기반 API를 의미합니다. 안정적으로 사용할 수 없습니다

향후 IDBTransaction 객체에 commit() 메서드를 추가하여 효과적으로 쓰기 전용 트랜잭션인 작업을 수행할 수 있는 방법을 있습니다 다시 말해 개발자가 IndexedDB에 데이터를 저장하고 읽기로 구성된 복잡한 트랜잭션을 수행하지 않음 쓰기 작업을 수행하는 경우 commit() 메서드는 태스크 큐가 완료되기 전에 완료될 수 있습니다. 정지됨 (IndexedDB 데이터베이스가 이미 열려 있다고 가정)

그러나 현재 작동해야 하는 코드의 경우 개발자는 두 가지 옵션 중 하나를 선택할 수 있습니다.

세션 저장소 사용: 세션 저장소 동기식이며 페이지가 삭제되어도 유지됩니다.
서비스 워커에서 IndexedDB 사용: 서비스 워커는 페이지가 종료되거나 삭제된 후 IndexedDB. freeze 또는 pagehide 이벤트 리스너: postMessage()님, 서비스 워커가 데이터 저장을 처리할 수 있습니다.

를 통해 개인정보처리방침을 정의할 수 있습니다.

고정 및 삭제된 상태에서 앱 테스트

앱이 고정 및 삭제된 상태에서 어떻게 동작하는지 테스트하려면 chrome://discards하면 앱을 고정하거나 폐기할 수 있습니다. 탭을 엽니다.

이렇게 하면 페이지에서 freeze 및 resume를 올바르게 처리할 수 있습니다. 이벤트 및 페이지가 새로고침될 때 document.wasDiscarded 플래그 있습니다

요약

사용자 기기의 시스템 리소스를 존중하려는 개발자 페이지 수명 주기 상태를 염두에 두고 앱을 빌드해야 합니다. 중요한 것은 페이지가 리소스를 너무 많이 소모하지 않는 것이 사용자가 기대하지 않는

개발자가 새로운 Page Lifecycle API를 구현하기 시작할수록 브라우저가 사용하지 않는 페이지를 정지하고 삭제하는 데 사용됩니다. 이 브라우저가 메모리, CPU, 배터리 및 네트워크 리소스를 더 적게 소비한다는 것을 의미합니다. 사용자 입장에서 이득입니다.