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

Question

我正在尝试提高网站的性能。我们使用延迟样式，因此首先只加载关键的 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>

Answer 1

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

我找到了两种解决此问题的方法，在 html 文档的末尾添加 css 代码(在最终标记之后(。不太理想

或者你可以使用我在这里找到的这个脚本 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 并缓存它