뒤로-앞으로 캐시 notRestoredReasons API

bfcache를 사용하지 못하도록 차단된 탐색과 그 이유를 찾습니다.

Chris Mills

PerformanceNavigationTiming 클래스에 추가된 notRestoredReasons 속성은 문서에 있는 프레임이 탐색 시 bfcache를 사용하지 못하도록 차단되었는지 여부와 그 이유에 관한 정보를 보고합니다. 개발자는 이 정보를 사용하여 bfcache와 호환되도록 업데이트가 필요한 페이지를 식별하여 사이트 성능을 개선할 수 있습니다.

현재 상태

단계 상태
1. 설명 만들기 완전함
2. 사양의 초기 초안 만들기 Not started
3. 의견 수집 및 디자인 반복 진행 중
4. 오리진 트라이얼 시작됨
5. 출시 Not started

bfcache notRestoredReasons API 사용해 보기

버전 109부터 Chromium에서 bfcache notRestoredReasons API를 오리진 트라이얼로 사용할 수 있습니다. 이 기능의 출시 일정에 관한 업데이트된 정보는 ChromeStatus.com 기능 페이지를 참고하세요 (버전 출시 날짜는 Chrome 로드맵 참고).

오리진 트라이얼을 등록하고 실험에 사용하여 bfcache notRestoredReasons API를 사용해 볼 수 있습니다. 등록한 토큰을 사용하는 방법에 관한 안내는 오리진 트라이얼 참여를 참고하세요.

개념 및 사용법

최신 브라우저는 뒤로-앞으로 캐시 (bfcache)라고 하는 기록 탐색을 위한 최적화 기능을 제공합니다. 이를 통해 사용자가 이미 방문한 페이지로 돌아가는 즉시 로드 환경이 제공됩니다. 페이지는 다양한 이유로 인해 bfcache에 진입하지 못하도록 차단되거나 bfcache에 있는 동안 제거될 수 있습니다. 일부는 사양에 요구되고 일부는 브라우저 구현과 관련이 있습니다.

이전에는 Chrome 개발자 도구에 테스트가 있었음에도 개발자가 페이지에서 필드의 bfcache를 사용하지 못하도록 차단된 이유를 개발자가 파악할 방법이 없었습니다. 필드에서 모니터링을 사용 설정할 수 있도록 notRestoredReasons 속성을 포함하도록 PerformanceNavigationTiming 클래스가 확장되었습니다. 그러면 문서에 있는 모든 프레임에 관한 관련 정보가 포함된 객체가 반환됩니다.

  • HTML에서 식별하는 데 도움이 되는 프레임 id 및 name와 같은 세부정보
  • bfcache 사용이 차단되었는지 여부입니다.

  • bfcache 사용이 차단된 이유입니다.

    이를 통해 개발자는 해당 페이지가 bfcache와 호환되도록 조치를 취할 수 있으므로 사이트 성능이 개선됩니다.

예

PerformanceNavigationTiming 인스턴스는 Performance.getEntriesByType() 및 PerformanceObserver과 같은 기능에서 가져올 수 있습니다.

예를 들어 다음 함수를 호출하여 성능 타임라인에 현재 존재하는 모든 PerformanceNavigationTiming 객체를 반환하고 notRestoredReasons를 로깅할 수 있습니다.

function returnNRR() {
  const navEntries = performance.getEntriesByType("navigation");
  for (let i = 0; i < navEntries.length; i++) {
    console.log(`Navigation entry ${i}`);
    let navEntry = navEntries[i];
    console.log(navEntry.notRestoredReasons);
  }
}

기록 탐색의 경우 PerformanceNavigationTiming.notRestoredReasons 속성은 최상위 프레임의 차단된 상태를 나타내는 다음과 같은 구조의 객체를 반환합니다.

{
  blocked: true,
  children: [],
  id: "",
  name: "",
  reasons: [ "Internal Error", "Unload handler" ],
  src: "",
  url: "a.com"
}

속성은 다음과 같습니다.

blocked
탐색된 페이지가 bfcache (true)를 사용하지 못하도록 차단되는지 (false) 지정하는 불리언 값입니다.
children
최상위 프레임에 삽입된 프레임의 차단된 상태를 나타내는 객체의 배열입니다. 각 객체는 상위 객체와 동일한 구조를 갖습니다. 따라서 삽입된 프레임의 수준을 원하는 만큼 재귀적으로 나타낼 수 있습니다. 프레임에 하위 요소가 없으면 배열은 비어 있게 됩니다.
id
프레임의 id 속성 값을 나타내는 문자열입니다 (예: <iframe id="foo" src="...">). 프레임에 id가 없으면 값은 빈 문자열이 됩니다.
name
프레임의 name 속성 값을 나타내는 문자열입니다 (예: <iframe name="bar" src="...">). 프레임에 name가 없으면 값은 빈 문자열이 됩니다.
reasons
탐색된 페이지가 bfcache를 사용하지 못하도록 차단된 이유를 각각 나타내는 문자열의 배열입니다. 차단이 발생하는 데는 여러 가지 이유가 있습니다. 자세한 내용은 아래의 차단 이유 섹션을 참고하세요.
src
프레임의 소스 경로를 나타내는 문자열입니다 (예: <iframe src="b.html">). 프레임에 src가 없으면 값은 빈 문자열이 됩니다.
url
탐색한 페이지의 URL을 나타내는 문자열입니다.

기록 탐색을 나타내지 않는 PerformanceNavigationTiming 객체의 경우 notRestoredReasons 속성이 null를 반환합니다. 이는 undefined를 반환하는 notRestoredReasons가 지원되지 않는 것과 달리 bfcache가 특정 탐색과 관련이 없는지 확인하는 데 유용합니다.

동일 출처 프레임에서 bfcache 차단 보고

페이지에 동일 출처 프레임이 삽입된 경우 반환된 notRestoredReasons 값에는 삽입된 각 프레임의 차단된 상태를 나타내는 객체가 children 속성 내에 포함됩니다.

예를 들면 다음과 같습니다.

{
  blocked: false,
  children: [
    { url: "a.com", src: "b.a.com", id: "b", name: "b", blocked: false, reasons: [], children: [] },
    { url: "a.com", src: "c.a.com", id: "c", name: "c", blocked: true, reasons: [ "BroadcastChannel" ], children: [] },
    { url: "a.com", src: "d.a.com", id: "d", name: "d", blocked: false, reasons: [], children: [] }
  ],
  id: "",
  name: "",
  reasons: [],
  src: "",
  url:"a.com"
}

교차 출처 프레임에서 bfcache 차단 보고

페이지에 교차 출처 프레임이 삽입되어 있는 경우 Google에서는 교차 출처 정보 유출을 방지하기 위해 해당 프레임에 관해 공유되는 정보의 양을 제한합니다. 외부 페이지에서 이미 알고 있는 정보와 교차 출처 서브트리가 bfcache를 차단했는지 여부만 포함합니다. 일부 하위 수준의 출처가 동일하더라도 차단 이유나 하위 트리의 하위 수준에 관한 정보는 포함하지 않습니다.

예를 들면 다음과 같습니다.

{
  blocked: false,
  children: [
    { url: "a.com", src: "c.a.com", id: "c", name: "c", blocked: true, reasons: [ "ScreenReader" ], children: [] },
    /* cross-origin frame */
    { url: "", src: "b.com", id: "d", name: "d", blocked: true, reasons: [], children: [] }
  ],
  id: "",
  name: "",
  reasons: [],
  src: "",
  url:"a.com"
}

여러 교차 출처 프레임에 차단 이유가 있는 경우 Google에서는 교차 출처 iframe 하나를 무작위로 선택하고 bfcache 차단 여부를 보고합니다. 나머지 프레임에서는 blocked 값으로 null를 보고합니다. 이는 악의적인 행위자가 페이지에 여러 서드 파티 프레임을 삽입한 다음 각각의 차단 정보를 비교하여 제어하지 않는 사이트에서 사용자 상태에 대한 정보를 추론하는 것을 방지하기 위한 것입니다.

{
  blocked: false,
  children: [
    /* cross-origin frames */
    {url: "", src: "b.com", id: "b", name: "b", blocked: null, reasons: [], children: []},
    {url: "", src: "c.com", id: "c", name: "c", blocked: true, reasons: [], children: []},
    {url: "", src: "d.com", id: "d", name: "d", blocked: null, reasons: [], children: []}
  ]
  id: "",
  name: "",
  reasons: [],
  src: "",
  url:"a.com"
}

보안 및 개인 정보 보호 고려사항에 관한 자세한 내용은 설명의 보안 및 개인 정보 보호 섹션을 참고하세요.

차단 이유

앞서 언급했듯이 차단이 발생하는 데는 여러 가지 이유가 있습니다. 모든 이유 문자열과 그 의미를 설명하는 유용한 스프레드시트를 마련해 두었습니다.

주목해야 할 몇 가지 주요 범주는 다음과 같습니다.

  • Circumstantial: 개발자의 페이지 코드와 직접적인 관련이 없는 차단 이유를 나타냅니다. 예를 들어 관련 구성요소가 다운되었거나, 로드 프로세스에 문제가 발생했거나, 페이지가 캐시될 수 없는 임시 상태에 있거나, 메모리 부족으로 bfcache가 사용 중지되었거나, 서비스 워커가 페이지에 어떤 조치를 취하여 캐시되지 못하도록 했습니다.
  • Extensions: 메시지가 광고 확장과 관련된 몇 가지 이유가 있습니다. 일반적으로 Google에서는 여러 가지 이유로 '광고 확장' 이유를 하나로 통합합니다. 사용자가 설치한 확장 프로그램, 페이지에서 활성화된 확장 프로그램, 사용자가 하고 있는 작업 등에 대해 너무 많은 정보를 제공하고 싶지 않기 때문에 확장 프로그램 관련 차단 이유를 의도적으로 모호하게 표현하고 있습니다.
  • PageSupportNeeded: 개발자의 코드가 bfcache 차단이 아닌 웹 플랫폼 기능을 사용하고 있지만 현재 bfcache 차단 상태입니다. 예를 들어 현재 페이지에 등록된 리스너가 있는 BroadcastChannel 또는 열린 IndexedDB 연결이 있습니다. 또는 페이지에서 unload 핸들러를 등록하여 현재 일부 브라우저에서 bfcache를 사용하지 못하게 합니다.
  • SupportPending: 개발자의 코드가 Web Serial API, Web Authentication API, File System Access API 또는 Media Session API와 같이 bfcache에서 페이지의 자격을 박탈하는 웹 플랫폼 기능을 사용하고 있습니다. 또는 페이지에서 현재 일부 브라우저에서 bfcache를 사용하지 못하게 차단하는 Cache-Control: no-store를 사용하고 있습니다. 이 카테고리는 bfcache를 차단하는 페이지 외부(예: 스크린 리더 또는 Chrome 비밀번호 관리자)의 존재를 보고하는 데도 사용됩니다.

의견

Chromium팀은 bfcache notRestoredReasons API 사용 경험에 관한 의견을 기다리고 있습니다.

API 설계에 대해 알려주세요.

API에서 예상한 대로 작동하지 않는 부분이 있나요? 아니면 아이디어를 구현하는 데 필요한 메서드나 속성이 누락되었나요? 보안 모델에 대한 질문이나 의견이 있으신가요? 관련 [GitHub 저장소][의견]에서 사양 문제를 제출하거나 기존 문제에 대한 의견을 추가하세요.

구현 관련 문제 신고

Chromium 구현에서 버그를 발견하셨나요? 아니면 구현이 사양과 다른가요? new.crbug.com에서 버그를 신고합니다. 가능한 한 많은 세부정보와 간단한 재현 안내를 포함하고 구성요소를 UI > Browser > Navigation > bfcache로 지정합니다. Glitch는 쉽고 빠른 재현을 공유하는 데 효과적입니다.

API 지원 표시

bfcache notRestoredReasons API를 사용할 계획인가요? 공개 지원은 Chromium팀이 기능의 우선순위를 정하는 데 도움이 되며 다른 브라우저 공급업체에 이러한 기능을 지원하는 것이 얼마나 중요한지 보여줍니다.

해시태그 #NotRestoredReasons를 사용하여 @ChromiumDev로 트윗을 보내고 사용 위치와 방법을 알려주세요.

유용한 링크