如何防止延迟样式加载每个页面加载而不是第一次加载？答案

【问题标题】：How to prevent deferred styling from loading every page load instead of only the first time?如何防止延迟样式加载每个页面加载而不是第一次加载？
【发布时间】：2018-10-09 11:13:48
【问题描述】：

我正在尝试提高网站的性能。我们使用延迟样式，因此只有关键的 CSS 一开始加载，其余的 CSS 文件在页面加载后加载。

这里的问题是每次页面加载都会发生这种情况。我们想创建一个缓存加载的 CSS 文件的东西，这样它就不会在每次页面加载时都加载文件。

如何让浏览器缓存我的样式表？

我们正在使用https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

 <noscript id="deferred-styles">
<link href="/css/rfs-styleguide.css" rel="stylesheet"></link>
<link href="/css/rfs-layout.css" rel="stylesheet"></link>
<link href="/css/rfs-icons.css" rel="stylesheet"></link>
<link href="/css/rfs-icons-betalen.css" rel="stylesheet"></link>
<link href="/css/rfs-icons-algemeen.css" rel="stylesheet"></link>
<link href="/dist/rfs-responsive-template.css?{{cachebust}}" rel="stylesheet"></link>
</noscript> 
<script>
var loadDeferredStyles = function () {
    var addStylesNode = document.getElementById("deferred-styles");
    var replacement  = document.createElement("div");
    replacement.innerHTML = addStylesNode.textContent;
    document.body.appendChild(replacement)
    addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
if (raf) raf(function () {
    window.setTimeout(loadDeferredStyles, 0);
});
else window.addEventListener('load', loadDeferredStyles);
</script>

【问题讨论】：

“我们正在使用延迟样式” - 告诉我们这意味着什么。可能有很多东西，所以在没有看到你的实际实现的情况下，我看不出我们如何开始回答这个问题。
@misorude 抱歉，我认为这是 Google 的常见解决方案。这就是我们正在使用的：developers.google.com/speed/docs/insights/OptimizeCSSDelivery
所做的只是将“隐藏”的link 元素放入文档内的noscript 元素中。如果这不从缓存中获取资源，而是从服务器再次加载它们，那么这与这个脚本几乎没有关系 - 如果你没有做所有这些，你会得到同样的效果，只是嵌入你的样式表正常。所以此时你的实际问题变成了我如何让我的样式表被浏览器缓存，为此你应该做一些研究，如果你还不知道那个话题。

标签： html css performance loading deferred

【解决方案1】：

当您使用 Google 推荐的延期代码时，我遇到了确切的问题。我尝试运行一个预取请求，但它仍然没有缓存它。

我找到了两种方法来解决这个问题，将 css 代码添加到 html 文档的末尾（在 final 标记之后）。不太理想

或者你可以使用我在这里找到的这个脚本https://master-origin-loadcss.fgview.com/test/preload.html

<link rel="preload" href="slow.css.php" as="style" onload="this.onload=null;this.rel='stylesheet'">

这将延迟 CSS 并将其缓存

【讨论】：