Javascript 如何以正确的方式加载css异步？

为了进一步了解优化网站，我一直在尝试让我的网站在PageSpeed Insights上获得完美的分数。到目前为止，除了CSS交付之外，一切都进展顺利

我确实通过使用preload标签获得了一个完美的结果，但由于某些原因，Firefox没有加载这个标签。所以我尝试使用其他解决方案

然后我转到这个：

<link rel="stylesheet" href="~/css/site.min.css" media="none" onload="if(media !== 'all')media='all';">
<noscript><link rel="stylesheet" href="~/css/site.min.css"></noscript>

这看起来非常有效，但pagespeed没有表现出来，所以它只给了我85分的评分

当我在头部使用

，在身体末端使用

时，也发生了同样的情况

然后我尝试用Javascript加载css，如下所示：

<noscript id="deferred-styles">
    <link rel="stylesheet" href="~/css/site.min.css"/>
</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 = requestAnimationFrame ||
        mozRequestAnimationFrame ||
        webkitRequestAnimationFrame ||
        msRequestAnimationFrame;
    if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
    else window.addEventListener('load', loadDeferredStyles);
</script>

var loadDeferredStyles=函数（）{
var addStylesNode=document.getElementById（“延迟样式”）；
var替换=document.createElement（“div”）；
replacement.innerHTML=addStylesNode.textContent；
文件.正文.附件（替换）；
addStylesNode.parentElement.removeChild（addStylesNode）；
};
var raf=requestAnimationFrame||
mozRequestAnimationFrame||
webkitRequestAnimationFrame||
msRequestAnimationFrame；
if（raf）raf（function（）{window.setTimeout（loadDeferredStyles，0）；}）；
else窗口。addEventListener（'load'，loadDeferredStyles）；

---

但这也有同样的效果！Pagespeed没有把它接起来，给了我一个很差的评价。有什么原因吗？因为上面的代码可以在他们的网站上找到

这是我在

之前使用的，效果很好

函数下载下载（）{
//动态加载CSS
var ls=document.createElement（“链接”）；
ls.rel=“样式表”；
ls.href=“css/my css file.css”；
document.getElementsByTagName（“head”）[0].appendChild（ls）；
}
if（window.addEventListener）window.addEventListener（“加载”，downloadAtOnload，false）；
else if（window.attachEvent）window.attachEvent（“onload”，downloadAtOnload）；
else window.onload=下载加载；

根据我使用google pagespeed的经验，为了优化css交付，你必须在网页的第一个折叠处编写内联css代码。这样它可以快速绘制，其余的css可以在外部文件中编写。最小化和压缩页面中使用的css文件。有关更多信息，请参阅此链接

它似乎不适合我。Pagespeed仍然告诉我要优化CSS交付。当我将其从页面中删除时，Pagespeed会告诉我进行优化。当我再次添加代码时，Pagespeed是一只快乐的兔子，我得了97分。@Gerard我认为这是快乐的，因为你的代码是在Pagespeed测试完成后运行的。当你删除你的代码时，你的css文件会立即被调用，所以我有一个内嵌的加载微调器。此微调器在样式标记中设置样式。页面的其余部分也隐藏在内联样式中。在加载的css文件中，我隐藏微调器并显示页面。这样做行吗？这就是他们在折叠上方的意思吗？你移除装载机的逻辑是什么？如何卸下装载机？我的意思是，如果数据是加载器，或者你有固定的时间间隔？如果你看到代码，可能会更容易。在这里，您可以看到我将页面设置为“无”，而我的微调器占据了enitre屏幕。在site.css文件中，我隐藏微调器并显示我的页面。因此，当css加载时，微调器就消失了。现在，在head标记中移动所有css文件。删除用作回退的noscript。移除加载器的逻辑通常基于jquery的document.ready或window.load函数。试着把你所有的css文件集中到一个文件中，然后告诉我pagespeed的分数。