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

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

Chris Mills

Thuộc tính notRestoredReasons, được thêm vào lớp PerformanceNavigationTiming, sẽ báo cáo thông tin về việc các khung hình 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ể dùng thông tin này để xác định những trang cần cập nhật để đảm bảo khả năng tương thích với bfcache, nhờ đó cải thiện hiệu suất trang web.

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

Dùng thử API bfcache notRestoredReasons

Kể từ phiên bản 109, API bfcache notRestoredReasons được cung cấp dưới dạng bản dùng thử theo nguyên gốc trong Chromium. Tìm thông tin cập nhật về lịch phát hành của tính năng này bằng cách truy cập trang tính năng của ChromeStatus.com (xem lộ trình phát hành Chrome để biết ngày phát hành phiên bản).

Bạn có thể dùng thử API bfcache notRestoredReasons bằng cách đăng ký bản dùng thử theo nguyên gốc và sử dụng API này trong các thử nghiệm. Hãy xem bài viết Tham gia dùng thử theo nguyên gốc để biết hướng dẫn về cách sử dụng mã thông báo của bạn sau khi đăng ký.

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

Các trình duyệt hiện đại cung cấp tính năng tối ưu hoá cho thao tác di chuyển trong nhật ký được gọi là bộ nhớ đệm cho thao tác tiến/lùi (bfcache). Tính năng này mang lại trải nghiệm tải tức thì khi người dùng quay lại trang mà họ đã truy cập. Các trang có thể bị chặn truy cập vào bfcache hoặc bị loại khi đang ở bfcache vì nhiều lý do, một số trang cần phải có quy cách và một số cụ thể cho việc triển khai trình duyệt.

Trước đây, nhà phát triển không có cách nào để tìm hiểu lý do các trang của họ bị chặn sử dụng bfcache trong trường này, mặc dù đã có thử nghiệm trong các 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 tất cả các khung có trong tài liệu:

• Các chi tiết như khung id và name để giúp xác định chúng trong HTML.
• Liệu họ có bị chặn sử dụng bfcache không.

• Lý do chặn không cho sử dụng bfcache.

  Việc này cho phép nhà phát triển thao tác để làm cho những trang đó tương thích với bộ nhớ đệm, nhờ đó nâng cao hiệu suất của trang web.

Ví dụ

Thực thể PerformanceNavigationTiming có thể được lấy 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 hiện 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 thao tác di chuyển trong nhật ký, thuộc tính PerformanceNavigationTiming.notRestoredReasons trả về một đối tượng có cấu trúc như sau, thể hiện trạng thái bị chặn của khung cấp cao nhất:

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

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

blocked

Một giá trị boolean chỉ định liệu trang được điều hướng có bị chặn sử dụng bfcache (true) hay không (false).

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 nhúng trong khung cấp cao nhất. Mỗi đối tượng có cấu trúc giống như đối tượng mẹ. Bằng cách này, bất kỳ cấp độ khung được nhúng nào cũng có thể được biểu thị bên trong đối tượng theo đệ quy. Nếu khung không có phần tử con, mảng này sẽ trống.

id

Một chuỗi biểu thị giá trị thuộc tính id của khung (ví dụ: <iframe id="foo" src="...">). Nếu khung không có id thì giá trị này sẽ là một chuỗi trống.

name

Một chuỗi biểu thị giá trị thuộc tính name của khung (ví dụ: <iframe name="bar" src="...">). Nếu khung không có name thì giá trị này sẽ là một chuỗi trống.

reasons

Một mảng chuỗi, mỗi chuỗi thể hiện lý do trang được điều hướng bị chặn sử dụng bfcache. Có nhiều lý do khác nhau khiến việc chặn có thể xảy ra. Hãy xem phần Lý do chặn bên dưới để biết thêm thông tin.

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, giá trị sẽ là một chuỗi trống.

url

Một chuỗi biểu thị URL của trang được đ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 nhật ký, thuộc tính notRestoredReasons sẽ trả về null. Thao tác này rất hữu ích cho việc xác định xem bfcache có liên quan đến một thao tác điều hướng cụ thể hay không, khác với notRestoredReasons không được hỗ trợ trong trường hợp đó sẽ trả về undefined.

Báo cáo tính năng chặn bfcache trong các khung cùng nguồn gốc

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

Ví dụ:

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

Báo cáo tính năng chặn bfcache trong các khung trên nhiều nguồn gốc

Khi một trang được nhúng khung trên nhiều nguồn gốc, chúng tôi sẽ giới hạn lượng thông tin được chia sẻ về các trang đó để tránh làm rò rỉ thông tin giữa các nguồn gốc. Chúng tôi chỉ đưa vào thông tin mà trang bên ngoài đã biết, và liệu cây con trên 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 hoặc thông tin nào về các cấp thấp hơn của cây con (ngay cả khi một số cấp phụ có cùng nguồn gốc).

Ví dụ:

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

Nếu nhiều khung trên nhiều nguồn gốc có lý do chặn, chúng tôi sẽ chọn ngẫu nhiên một iframe trên nhiều nguồn gốc và báo cáo xem khung nội tuyến đó có chặn bfcache hay không. Đối với các khung hình còn lại, chúng tôi báo cáo null cho giá trị blocked. Điều này nhằm ngăn đối tượng xấu suy luận thông tin về trạng thái của người dùng trên các trang web mà họ không kiểm soát bằng cách nhúng nhiều khung của bên thứ ba vào một trang rồi so sánh thông tin chặn của mỗi khung.

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

Hãy xem phần Bảo mật và quyền riêng tư trong phần giải thích để biết thêm thông tin về những điều cần cân nhắc liên quan đến bảo mật và quyền riêng tư.

Lý do chặn

Như chúng tôi đã nói, có nhiều lý do khác nhau khiến việc chặn có thể xảy ra. Chúng tôi đã biên soạn một bảng tính tiện dụng trình bày tất cả các chuỗi lý do và giải thích ý nghĩa của các chuỗi đó.

Có một số lý do chính mà bạn cần nhắc đến:

• Circumstantial: Đề cập đến các lý do chặn không liên quan trực tiếp đến mã trang của nhà phát triển. Ví dụ: một thành phần có liên quan bị lỗi, đã xảy ra lỗi trong quá trình tải, trang ở trạng thái tạm thời không thể lưu vào bộ nhớ đệm, bfcache bị vô hiệu hoá do thiếu bộ nhớ hoặc nhân viên dịch vụ đã làm gì đó với trang khiến trang không được lưu vào bộ nhớ đệm.
• Extensions: Có một vài thông báo lý do liên quan đến tiện ích. Nói chung, chúng tôi kết hợp khá nhiều lý do thành "Phần mở rộng". Chúng tôi cố ý mơ hồ về các lý do chặn liên quan đến tiện ích bởi vì chúng tôi không muốn cung cấp quá nhiều thông tin về những tiện ích mà người dùng đã cài đặt, những tiện ích nào đang hoạt động trên trang, họ đang làm gì, v.v.
• PageSupportNeeded: Mã của nhà phát triển đang sử dụng một tính năng nền tảng web không phải là tính năng chặn bfcache nhưng hiện đang ở trạng thái chặn bfcache. Ví dụ: trang hiện có BroadcastChannel (Kênh phát sóng) với các trình nghe đã đăng ký hoặc một kết nối IndexedDB mở. Hoặc trang đó đã đăng ký một trình xử lý unload. Trình xử lý này hiện ngăn chặn việc sử dụng bfcache trong một số trình duyệt.
• SupportPending: Mã của nhà phát triển đang sử dụng một tính năng của nền tảng web nhằm loại bỏ trang khỏi bfcache, ví dụ: Web Serial API, API xác thực web, API truy cập hệ thống tệp hoặc API phiên đa phương tiện. Hoặc trang đó đang sử dụng Cache-Control: no-store, chế độ này hiện ngăn chặn việc dùng bfcache trong một số trình duyệt. Danh mục này cũng được dùng để báo cáo sự hiện diện của một công cụ bên ngoài trang đang chặn bfcache, chẳng hạn như trình đọc màn hình hoặc trình quản lý mật khẩu Chrome.

Ý kiến phản hồi

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

Cho chúng tôi biết về thiết kế của API

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

Báo cáo sự cố với quá trình triển khai

Bạn có phát hiện thấy lỗi khi triển khai Chromium không? Hay cách triển khai có khác với quy cách không? Báo cáo lỗi tại new.crbug.com. Hãy nhớ cung cấp nhiều thông tin chi tiết nhất có thể, hướng dẫn đơn giản để tái tạo và chỉ định thành phần là UI > Browser > Navigation > bfcache. Sự cố rất hữu ích trong việc chia sẻ các bản sao nhanh và dễ dàng.

Hỗ trợ API

Bạn có định sử dụng API bfcache notRestoredReasons không? Sự hỗ trợ 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 biết tầm quan trọng của việc hỗ trợ các tính năng đó.

Hãy gửi một dòng tweet đến @ChromiumDev bằng hashtag #NotRestoredReasons rồi cho chúng tôi biết vị trí và cách bạn đang sử dụng bài đăng này.

Các đường liên kết hữu ích

• Bộ nhớ đệm cho thao tác tiến/lùi
• Nội dung giải thích công khai
• Lỗi theo dõi Chromium
• Bản dùng thử theo nguyên gốc của API NotKhôi phục lý cho bộ nhớ đệm cho thao tác tiến/lùi
• Trang tính năng của ChromeStatus.com
• Ý định thử nghiệm