檢查頁面是否從bfcache，HTTP緩存或新檢索的頁面加載

Question

下面的代碼檢查url是否已加載，然後登錄到控制檯。我想知道是否有簡單，乾淨的方法來檢查頁面是否從bfcache或http緩存中加載？ Firefox文檔指出，如果我從URL A轉到B，然後將後退按鈕轉到URL A，則不應觸發load事件，但這不是我的經驗，無論是load還是PageShow都會被記錄，不管有沒有人知道爲什麼？

var tabs = require("sdk/tabs"); 

function onOpen(tab) { 
    tab.on("pageshow", logPageShow); 
    tab.on("load", logLoading); 
} 

function logPageShow(tab) { 
    console.log(tab.url + " -- loaded (maybe from bfcache?) "); 
} 

function logLoading(tab) { 
    console.log(tab.url + " -- loaded (not from bfcache) "); 
} 

tabs.on('open', onOpen); 

Answer 1

我不知道是否有任何目的的API，但來考慮解決方法是檢查performance.timing.responseEnd - performance.timing.requestStart的價值。如果它是<= 5那麼最有可能是HTTP或back-forward cache。否則，它是從網上下載的。

通過back按鈕而不是打開乾淨的URL來識別返回頁面的方法是使用history API。例如：

// on page load 
var hasCameBack = window.history && window.history.state && window.history.state.customFlag; 
if (!hasComeBack) { 
    // most likely, user has come by following a hyperlink or entering 
    // a URL into browser's address bar. 
    // we flag the page's state so that a back/forward navigation 
    // would reveal that on a comeback-kind of visist. 
    if (window.history) { 
     window.history.replaceState({ customFlag: true }, null, null); 
    } 
} 
else { 
    // handle the comeback visit situation 
} 

另請參閱Manipulating the browser history文章在MDN。