뒤로-앞으로 캐시 notRestoredReasons API

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

Chris Mills
Barry Pollard

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

현재 상태

notRestoredReasons API는 Chrome 123부터 출시되었으며 점진적으로 출시되고 있습니다.

개념 및 사용법

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

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

  • bfcache를 사용하지 못하도록 차단된 이유입니다.

  • HTML에서 iframe을 식별하는 데 도움이 되는 프레임 id 및 name와 같은 세부정보입니다.

    이를 통해 개발자는 이러한 페이지를 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 속성은 최상위 프레임의 차단된 상태를 나타내는 다음과 같은 구조의 객체를 반환합니다.

{
  children: [],
  id: null,
  name: null,
  reasons: [
    {"reason", "unload-listener"}
  ],
  src: null,
  url: "https://www.example.com/page/"
}

속성은 다음과 같습니다.

children
최상위 프레임에 삽입된 동일한 출처 프레임의 차단된 상태를 나타내는 객체의 배열입니다. 각 객체는 상위 객체와 구조가 동일합니다. 즉, 삽입된 프레임을 원하는 수의 프레임 수준으로 객체 내에서 재귀적으로 표현할 수 있습니다. 프레임에 하위 요소가 없으면 배열은 비어 있게 됩니다.
id
프레임의 id 속성 값을 나타내는 문자열입니다 (예: <iframe id="foo" src="...">). 프레임에 id가 없으면 값은 null입니다. 최상위 페이지의 경우 null입니다.
name
프레임의 name 속성 값을 나타내는 문자열입니다 (예: <iframe name="bar" src="...">). 프레임에 name가 없으면 값은 빈 문자열이 됩니다. 최상위 페이지의 경우 null입니다.
reasons
탐색된 페이지에서 bfcache를 사용하지 못하도록 차단된 이유를 각각 나타내는 문자열 배열입니다. 차단이 발생하는 데는 여러 가지 이유가 있습니다. 자세한 내용은 차단 이유 섹션을 참조하세요.
src
프레임 소스의 경로를 나타내는 문자열입니다 (예: <iframe src="b.html">). 프레임에 src가 없으면 값은 빈 문자열이 됩니다. 최상위 페이지의 경우 null입니다.
url
탐색된 페이지/iframe의 URL을 나타내는 문자열입니다.

기록 탐색을 나타내지 않는 PerformanceNavigationTiming 객체의 경우 notRestoredReasons 속성이 null를 반환합니다.

차단 이유가 없으면 notRestoredReasons도 null를 반환하므로 null이라는 것이 bfcache가 사용되었거나 사용되지 않았음을 나타내는 것은 아닙니다. 이를 위해 event.persisted 속성을 사용해야 합니다.

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

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

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

{
  children: [
    {
      children: [],
      id: "iframe-id",
      name: "iframe-name",
      reasons: [],
      src: "./index.html",
      url: "https://www.example.com/"
    },
    {
      children: [],
      id: "iframe-id2",
      name: "iframe-name2",
      reasons: [
        {"reason": "unload-listener"}
      ],
      src: "./unload-examples.html",
      url: "https://www.example.com/unload-examples.html"
    },
  ],
  id: null,
  name: null,
  reasons: [],
  src: null,
  url:"https://www.example.com"
}

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

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

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

{
  children: [
    {
      children: [],
      id: "iframe-id",
      name: "iframe-name",
      reasons: [],
      src: "./index.html",
      url: "https://www.example2.com/"
    }
  ],
  id: null,
  name: null,
  reasons: [
        {"reason": "masked"}
  ],
  src: null,
  url:"https://www.example.com"
}

모든 교차 출처 iframe에서 프레임의 reasons 값에 null가 보고되며 최상위 프레임에는 "masked"의 이유가 표시됩니다. "masked"는 사용자 에이전트별 이유로 사용될 수도 있으므로 iframe의 문제를 나타내지 않을 수도 있습니다.

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

차단 이유

앞서 말씀드린 것처럼 다음과 같은 여러 가지 이유로 차단이 발생할 수 있습니다.

다음은 bfcache를 사용할 수 없는 가장 일반적인 이유의 예입니다.

  • unload-listener: 페이지가 특정 브라우저에서 bfcache 사용을 방지하는 unload 핸들러를 등록합니다. 자세한 내용은 unload 이벤트 지원 중단을 참고하세요.
  • response-cache-control-no-store: 페이지에서 no-store를 cache-control 값으로 사용합니다.
  • related-active-contents: 페이지가 이 페이지에 대한 참조가 있는 다른 페이지에서 열렸습니다('탭 중복' 사용).

의견

Chromium팀에서 bfcache notRestoredReasons API를 사용한 경험에 관해 듣고자 합니다.

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

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

구현 문제 신고

Chromium 구현에서 버그를 발견하셨나요? 아니면 구현이 사양과 다른가요? Issue Tracker에서 버그를 신고합니다. 간단한 재현 지침을 최대한 많이 포함하고 구성요소를 UI > Browser > Navigation > BFCache로 지정하세요. Glitch는 쉽고 빠른 재현을 공유하는 데 효과적입니다.

API 지원 표시

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

#NotRestoredReasons 해시태그를 사용하여 @ChromiumDev로 트윗을 보내고 언제 어떻게 사용하고 있는지 알려주세요.

유용한 링크