뒤로-앞으로 캐시 notRestoredReasons API

bfcache 사용이 차단된 탐색과 그 이유를 확인합니다.

Chris Mills
Barry Pollard

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

현재 상태

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

개념 및 사용

최신 브라우저에서는 뒤로-앞으로 캐시 (bfcache)라는 기록 탐색 최적화 기능을 제공합니다. 이를 통해 사용자가 이미 방문한 페이지로 돌아갈 때 즉시 로드되는 환경을 제공할 수 있습니다. 페이지가 bfcache에 들어가지 못하거나 bfcache에 있는 동안 삭제될 수 있는 이유는 다양하며, 그중 일부는 사양에 필요하고 일부는 브라우저 구현에만 해당합니다.

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

  • 뒤로/앞으로 캐시 사용이 차단된 이유입니다.

  • 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 차단 보고

페이지에 크로스 오리진 프레임이 삽입된 경우 크로스 오리진 정보가 유출되지 않도록 프레임에 관해 공유되는 정보의 양을 제한합니다. 외부 페이지에서 이미 알고 있는 정보와 교차 출처 하위 트리가 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: 페이지에서 unload 핸들러를 등록하여 특정 브라우저에서 bfcache 사용을 방지합니다. 자세한 내용은 unload 이벤트 지원 중단을 참고하세요.
  • response-cache-control-no-store: 페이지에서 no-store을 cache-control 값으로 사용합니다.
  • related-active-contents: 이 페이지에 대한 참조가 아직 있는 다른 페이지에서 페이지가 열렸습니다('탭 복제' 사용).

의견

Chromium팀은 bfcache notRestoredReasons API에 관한 여러분의 경험을 듣고 싶습니다.

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

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

구현 문제 신고

Chromium 구현에서 버그를 발견하셨나요? 아니면 구현이 사양과 다른가요? 문제 추적기에 버그를 신고하세요. 가능한 한 많은 세부정보와 재현을 위한 간단한 안내를 포함하고 구성요소를 UI > Browser > Navigation > BFCache로 지정하세요.

API 지원 표시

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

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

유용한 링크