뒤로-앞으로 캐시 notRestoredReasons API

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

Chris Mills
Barry Pollard

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

현재 상태

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

개념 및 사용

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

이전에는 Chrome 개발자 도구에서 테스트가 있었지만 개발자가 현장에서 페이지가 bfcache를 사용하는 것을 차단하는 이유를 파악할 방법이 없었습니다. 현장에서 모니터링을 사용 설정하기 위해 PerformanceNavigationTiming 클래스가 확장되어 notRestoredReasons 속성이 포함되었습니다. 이렇게 하면 상단 프레임 및 문서에 있는 모든 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 차단 보고

페이지에 교차 출처 프레임이 삽입된 경우 교차 출처 정보를 유출하지 않도록 이러한 프레임에 관해 공유되는 정보의 양이 제한됩니다. 외부 페이지에서 이미 알고 있는 정보와 교차 출처 하위 트리가 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 핸들러를 등록합니다. 자세한 내용은 로드 취소 이벤트 지원 중단을 참고하세요.
  • 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에 트윗을 보내고 사용 중인 위치와 사용 방법을 알려주세요.

유용한 링크