检查页面是否是从 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
}

另请参阅 MDN 上的操作浏览器历史记录文章。

Answer 2

您现在可以在所有主要浏览器中检查网络实际传输了多少字节：

if(performance.getEntriesByType("navigation")[0].transferSize === 0) {
  // page was loaded from cache
}

请参阅 MDN 上的PerformanceResourceTiming。

注意：与往常一样，Safari 是落后者，仅在 16.4 中支持

transferSize

，因此截至 2024 年（请参阅上面链接的 MDN 文章中的兼容性表），您可能仍然需要处理此功能不可用的情况可用。