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建议的延迟代码时，我遇到了确切的问题。我尝试运行预取请求，但仍未将其缓存。

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

或者您可以使用在https://master-origin-loadcss.fgview.com/test/preload.html

中找到的此脚本

prefWidth

这将延迟CSS并将其缓存

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

1 个答案: