API bộ nhớ đệm cho thao tác tiến/lùi không được khôi phục

Tìm hiểu những thao tác điều hướng nào bị chặn sử dụng bfcache và lý do.

Chris Mills
Barry Pollard

Thuộc tính notRestoredReasons, được thêm vào lớp PerformanceNavigationTiming, báo cáo thông tin về việc liệu các khung hiện có trong tài liệu có bị chặn sử dụng bfcache khi điều hướng hay không và lý do. Nhà phát triển có thể sử dụng thông tin này để xác định những trang cần cập nhật để tương thích với bfcache, từ đó cải thiện hiệu suất trang web.

Trạng thái hiện tại

API notRestoredReasons đã được phát hành từ Chrome 123 và đang được triển khai dần.

Khái niệm và cách sử dụng

Các trình duyệt hiện đại cung cấp một tính năng tối ưu hoá cho thao tác điều hướng theo nhật ký duyệt web có tên là bộ nhớ đệm cho thao tác tiến/lùi (bfcache). Điều này giúp mang lại trải nghiệm tải tức thì khi người dùng quay lại một trang mà họ đã truy cập. Các trang có thể bị chặn không cho vào bfcache hoặc bị loại bỏ trong bfcache vì nhiều lý do, một số lý do bắt buộc theo quy cách và một số lý do dành riêng cho việc triển khai trình duyệt.

Trước đây, nhà phát triển không thể tìm hiểu lý do các trang của họ bị chặn sử dụng bfcache trong trường, mặc dù có quy trình kiểm thử trong công cụ dành cho nhà phát triển Chrome. Để bật tính năng giám sát trong trường, lớp PerformanceNavigationTiming đã được mở rộng để bao gồm thuộc tính notRestoredReasons. Thao tác này sẽ trả về một đối tượng chứa thông tin liên quan trên khung trên cùng và tất cả iframe có trong tài liệu:

  • Lý do khiến họ bị chặn sử dụng bfcache.

  • Thông tin chi tiết như khung id và name để giúp xác định iframe trong HTML.

    Điều này cho phép nhà phát triển hành động để làm cho các trang đó tương thích với bfcache, từ đó cải thiện hiệu suất trang web.

Ví dụ

Bạn có thể lấy một thực thể PerformanceNavigationTiming từ các tính năng như Performance.getEntriesByType() và PerformanceObserver.

Ví dụ: bạn có thể gọi hàm sau để trả về tất cả đối tượng PerformanceNavigationTiming có trong tiến trình hiệu suất và ghi lại notRestoredReasons của các đối tượng đó:

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);
  }
}

Đối với các thao tác điều hướng theo nhật ký, thuộc tính PerformanceNavigationTiming.notRestoredReasons sẽ trả về một đối tượng có cấu trúc sau, đại diện cho trạng thái bị chặn của khung cấp cao nhất:

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

Các thuộc tính như sau:

children
Một mảng các đối tượng đại diện cho trạng thái bị chặn của mọi khung cùng nguồn gốc được nhúng trong khung cấp cao nhất. Mỗi đối tượng có cùng cấu trúc với đối tượng mẹ. Bằng cách này, bạn có thể biểu thị bất kỳ số lượng cấp khung nhúng nào bên trong đối tượng theo cách đệ quy. Nếu khung không có thành phần con, thì mảng sẽ trống.
id
Một chuỗi đại diện cho giá trị thuộc tính id của khung (ví dụ: <iframe id="foo" src="...">). Nếu khung không có id, giá trị sẽ là null. Đối với trang cấp cao nhất, đây là null.
name
Một chuỗi đại diện cho giá trị thuộc tính name của khung (ví dụ: <iframe name="bar" src="...">). Nếu khung không có name, giá trị sẽ là một chuỗi trống. Đối với trang cấp cao nhất, đây là null.
reasons
Một mảng các chuỗi, mỗi chuỗi đại diện cho một lý do khiến trang đã điều hướng bị chặn sử dụng bfcache. Có nhiều lý do khiến việc chặn có thể xảy ra. Hãy xem phần Lý do chặn để biết thêm thông tin chi tiết.
src
Một chuỗi đại diện cho đường dẫn đến nguồn của khung (ví dụ: <iframe src="b.html">). Nếu khung không có src, thì giá trị sẽ là một chuỗi trống. Đối với trang cấp cao nhất, đây là null.
url
Một chuỗi đại diện cho URL của trang/iframe đã điều hướng.

Đối với các đối tượng PerformanceNavigationTiming không biểu thị thao tác điều hướng trong nhật ký, thuộc tính notRestoredReasons sẽ trả về null.

Xin lưu ý rằng notRestoredReasons cũng trả về null khi không có lý do chặn nào, vì vậy, null không phải là chỉ báo cho biết bfcache đã được sử dụng hay chưa. Để làm được điều đó, bạn phải sử dụng thuộc tính event.persisted.

Báo cáo việc chặn bfcache trong các khung cùng nguồn gốc

Khi một trang có các khung cùng nguồn gốc được nhúng, giá trị notRestoredReasons được trả về sẽ chứa một đối tượng bên trong thuộc tính children đại diện cho trạng thái bị chặn của từng khung được nhúng.

Ví dụ:

{
  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"
}

Báo cáo việc chặn bfcache trong các khung nhiều nguồn gốc

Khi một trang có các khung chéo nguồn được nhúng, chúng tôi sẽ giới hạn lượng thông tin được chia sẻ về các khung đó để tránh rò rỉ thông tin chéo nguồn. Chúng ta chỉ đưa vào thông tin mà trang bên ngoài đã biết và liệu cây con nhiều nguồn gốc có chặn bfcache hay không. Chúng tôi không đưa vào bất kỳ lý do chặn nào hoặc thông tin về các cấp thấp hơn của cây con (ngay cả khi một số cấp con có cùng nguồn gốc).

Ví dụ:

{
  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"
}

Đối với tất cả các iframe trên nhiều nguồn gốc, chúng tôi báo cáo null cho giá trị reasons của khung và khung cấp cao nhất sẽ hiển thị lý do là "masked". Xin lưu ý rằng "masked" cũng có thể được dùng vì các lý do cụ thể của tác nhân người dùng, vì vậy, không phải lúc nào cũng cho biết vấn đề trong một iframe.

Hãy xem phần Bảo mật và quyền riêng tư trong nội dung giải thích để biết thêm thông tin chi tiết về các vấn đề cần cân nhắc về bảo mật và quyền riêng tư.

Lý do chặn

Như đã đề cập trước đó, có nhiều lý do khiến việc chặn có thể xảy ra:

Sau đây là ví dụ về một số lý do phổ biến nhất khiến bạn không thể sử dụng bfcache:

  • unload-listener: trang đăng ký một trình xử lý unload để ngăn việc sử dụng bfcache trong một số trình duyệt nhất định. Hãy xem phần Ngừng sử dụng sự kiện tải xuống để biết thêm thông tin.
  • response-cache-control-no-store: Trang sử dụng no-store làm giá trị cache-control.
  • related-active-contents: Trang này được mở từ một trang khác (bằng cách sử dụng "thẻ trùng lặp") vẫn có tham chiếu đến trang này.

Phản hồi

Nhóm Chromium muốn biết trải nghiệm của bạn với API bfcache notRestoredReasons.

Giới thiệu cho chúng tôi về thiết kế API

API có hoạt động như mong đợi không? Hay có phương thức hoặc thuộc tính nào bị thiếu mà bạn cần để triển khai ý tưởng của mình không? Bạn có câu hỏi hoặc nhận xét về mô hình bảo mật không? Gửi vấn đề về thông số kỹ thuật trên kho lưu trữ GitHub tương ứng hoặc thêm ý kiến của bạn vào một vấn đề hiện có.

Báo cáo vấn đề về việc triển khai

Bạn có tìm thấy lỗi khi triển khai Chromium không? Hay cách triển khai có khác với thông số kỹ thuật không? Gửi lỗi trên công cụ theo dõi lỗi của chúng tôi. Hãy nhớ cung cấp càng nhiều thông tin chi tiết càng tốt, hướng dẫn đơn giản để tái hiện và chỉ định thành phần là UI > Browser > Navigation > BFCache. Glitch rất hữu ích để chia sẻ các bản tái hiện nhanh chóng và dễ dàng.

Hỗ trợ API

Bạn có dự định sử dụng API notRestoredReasons bfcache không? Sự ủng hộ công khai của bạn giúp nhóm Chromium ưu tiên các tính năng và cho các nhà cung cấp trình duyệt khác thấy tầm quan trọng của việc hỗ trợ các tính năng đó.

Gửi một tweet đến @ChromiumDev bằng hashtag #NotRestoredReasons và cho chúng tôi biết bạn đang sử dụng ở đâu và như thế nào.

Đường liên kết hữu ích