有没有办法确定文件是否通过 JavaScript 缓存？答案

【问题标题】：Is there a way to determine if files are cached via JavaScript?有没有办法确定文件是否通过 JavaScript 缓存？
【发布时间】：2020-01-31 11:04:18
【问题描述】：

我正在尝试优化 OpenCart 网站的速度。不幸的是，这些扩展都没有任何好处，所以我决定手动完成所有操作。

例如，我正在优化 css 文件：

<link href="catalog/view/javascript/jquery/magnific/magnific-popup.css" type="text/css" rel="stylesheet" media="nope!" onload="this.media='all'">

这对我来说非常好用，因为我构建了一个预加载器，它等待所有 css 被加载然后显示我的页面。在这种情况下，PageSpeed 很高兴，我也很高兴。

问题是预加载器基本上可以工作：

     <script>
        document.onreadystatechange = function() {
            if (document.readyState !== "complete") {
                document.querySelector(
                  "body").style.visibility = "hidden";
                document.querySelector(
                  "#loader").style.visibility = "visible";
            } else {
                document.querySelector(
                  "#loader").style.display = "none";
                document.querySelector(
                  "body").style.visibility = "visible";
            }
        };
    </script>

这样每次我打开页面时它都会显示加载器，并且我只想在第一次显示它时 / 由于 css / 的阻塞，页面仍在呈现并显示纯 html。

所以我想知道是否有办法做到这一点..

提前致谢！

【问题讨论】：

stackoverflow.com/questions/10537039/…
@aravind 抱歉，这并没有真正回答我的问题，这只是告诉 css 是否已加载/每次刷新/如果文件被缓存，我需要一些可以帮助我实现预加载器的东西/不是。
即使你的 css 被缓存了，它仍然需要被加载，你有没有试过测量加载器在有和没有缓存文件的情况下“开启”多长时间？
@FMashiro 这是一个非常好的主意，但是当我试图像这样获得执行时间prnt.sc/qvlzb8 时，它几乎得到了相同的结果，当我将它放在函数中时根本没有测量它..
您确定在加载之间已正确清除缓存吗？因为看起来您的 CSS 没有正确缓存，或者您在没有清除缓存的情况下进行“之前/之后”测量（因此两个测量都将使用缓存）

标签： javascript performance opencart pagespeed

【解决方案1】：

您可以使用 interactive 状态而不是 complete。它在构建 DOM 时工作，但仍在加载其他资源。完整代码：

switch (document.readyState) {
  case "loading":
    document.querySelector("body").style.visibility = "hidden";
    document.querySelector("#loader").style.visibility = "visible";
    break;
  case "interactive":
  case "complete":
    document.querySelector("body").style.visibility = "visible";
    document.querySelector("#loader").style.visibility = "hidden";
    break;
}

【讨论】：

感谢您的建议，但不幸的是，由于交互状态会破坏页面，加载器隐藏后页面变为空白，并且每次单击刷新时仍显示加载器...
@milen 你需要改变你的状况。 else 将通过完成和加载触发。
hmm 还是一样的结果 -> prnt.sc/qvjq8m 这是我改变它的方式，在加载器之后我看到内容一毫秒，然后一切都是白色的
@milen 因为在其他情况下触发了事件“完成”。然后你在你的代码中说：“隐藏我的文档”。
有道理，我已经为完整状态添加了 elseif 条件，但是当我切换页面或刷新时我仍然有加载器..

【解决方案2】：

您可以采用 3 种方式： 1. 使用 Cookie 2.使用本地存储 3.使用会话存储

我建议您使用 sessionStorage 或 localStorage，第一个是出于安全原因，第二个 = cookie 正在慢慢消失。

要使用 sessionStorage，您可以执行以下操作：

//set sessionStorage
if (!sessionStorage.alreadybeenthere) {

    document.onreadystatechange = function() {
        if (document.readyState !== "complete") {
            document.querySelector(
                "body").style.visibility = "hidden";
            document.querySelector(
                "#loader").style.visibility = "visible";
        } else {
            document.querySelector(
                "#loader").style.display = "none";
            document.querySelector(
                "body").style.visibility = "visible";
        }
    };

    sessionStorage.alreadybeenthere = 1;

    console.log(Loader_executed)
}
else {
    console.log(Loader_not_executing)
}

如果您确定用户浏览器设置为保留浏览器缓存，则可以尝试使用 localStorage。

更多信息可以在这里找到： https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

【讨论】：

【解决方案3】：

我会使用 Workbox 构建一个服务工作者来积极缓存您的资产并从缓存中加载它们。

您甚至可以根据需要检查或从缓存中提取项目。

【讨论】：