找出哪些導覽遭到封鎖,以及原因。
notRestoredReasons
屬性已新增至 PerformanceNavigationTiming
類別,可回報資訊,說明文件中的框架是否遭到封鎖,無法在導覽時使用 bfcache,以及封鎖的原因。開發人員可以利用這項資訊,找出需要更新的網頁,讓網頁與 bfcache 相容,進而提升網站效能。
目前狀態
notRestoredReasons
API 已從 Chrome 123 推出,將逐步推出。
概念和用法
現代瀏覽器提供名為「往返快取」 (bfcache) 的瀏覽記錄導覽最佳化功能。這樣一來,使用者返回已造訪的網頁時,就能享有即時載入體驗。網頁可能基於各種不同原因而遭到封鎖,無法在 bfcache 中進入,或因各種原因而遭到撤銷,部分原因在於規格要求,以及瀏覽器實作方法。
過去,開發人員無法得知為何自己的網頁無法在該欄位使用 bfcache,即使他們可以在 Chrome 開發人員工具中進行測試。為在現場啟用監控功能,PerformanceNavigationTiming
類別已擴充為包含 notRestoredReasons
屬性。這個方法會傳回一個物件,其中包含頂層框架和文件中所有內嵌框架的相關資訊:
- 禁止使用 bfcache 的原因。
頁框
id
和name
等詳細資料,有助於識別 HTML 中的 iframe。這可讓開發人員採取行動,讓這些網頁與 bfcache 相容,進而改善網站效能。
範例
您可以從 Performance.getEntriesByType()
和 PerformanceObserver
等功能取得 PerformanceNavigationTiming
例項。
舉例來說,您可以叫用下列函式,傳回效能時間軸中顯示的所有 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 的網址的字串。
如果 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。詳情請參閱淘汰卸載事件。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,告訴我們你在何處使用這項功能,以及使用方式。