javascript - 检查页面是否从 bfcache、HTTP 缓存加载或新检索

Question

下面的代码检查 URL 是否已加载，然后记录到控制台。我想知道是否有简单、干净的方法来检查页面是否从 bfcache 或 http 缓存加载？ Firefox 文档指出，如果我从 URL A 转到 B，然后点击后退按钮到达 URL A，则不应触发 load 事件，但这不是我的经验，都是 load code> 和 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 上的文章。