Javascript CSS优化和PageSpeed洞察

我在我的网站上运行Google PageSpeed Insights-，它建议将样式表（）的加载从-

至-

var cb=函数（）{
var l=document.createElement（'link'）；
l、 rel=‘样式表’；
l、 href='/static/css/landing page.css'；
var h=document.getElementsByTagName（'head'）[0]；
h、 parentNode.insertBefore（l，h）；
};
var raf=requestAnimationFrame | | mozRequestAnimationFrame||
webkitRequestAnimationFrame | | msRequestAnimationFrame；
if（raf）raf（cb）；
else窗口。addEventListener（'load'，cb）；

我在我的样式表中尝试了这一点，它明显地改变了加载，因此您将看到前css视图，然后一秒钟后您将看到应用了样式表。这是在firefox中

---

我是否应该忽视这个方法，或者这是固定的吗？

< P>你应该考虑关键路径，并把所有必要的样式放在你的代码>头/代码>部分中，以避免FUC（只是折叠后的内容的样式）。这可以通过手工提取样式来完成，对于较大的站点，也可以通过像gulp这样的自动任务来完成

无论如何，如果选择用JavaScript加载所有样式表，仍然考虑在“代码> <代码>块中包含它们，因此当JS不可用时，它们也可以加载。

<noscript>
    <link rel="stylesheet" ...>
</noscript>

---

作为进一步的优化（目前它只在Chrome Canary上工作），可以使用

并以更简单的方式创建异步加载程序

<link rel="preload" href="..." as="style" onload="this.rel='stylesheet'">

---

另一个有趣且最新的方法是，它被称为“多级CSS加载”：它需要在必须设置样式的标记之前加载一小段CSS，从而避免对关键CSS的需要，例如

<link rel="stylesheet" href="/site-header.css">
<header>…</header>

<link rel="stylesheet" href="/article.css">
<main>…</main>

<link rel="stylesheet" href="/comment.css">
<section class="comments">…</section>

…
…
…

该计划用于在加载样式表时阻止后续内容的呈现，但允许呈现之前的内容。样式表以并行方式加载，但它们以串行方式应用。这使得行为类似于

---

看一看css和js文件在第一次加载后存储在缓存中，所以我认为运行脚本加载不会有任何区别。如果所有的，它会更快，如果你存储在本地存储css文件-我认为这是一个真正的狗屎推荐谷歌。用javascript函数在DOM就绪时加载CSS真的很烦人。这就产生了farrellmr描述的问题：稍后将看到应用样式。谷歌为什么推荐这种垃圾？当它是垃圾时，这不是谷歌推荐的第一件事（例如，对于您需要的所有功能，使用

-webkit-

前缀）

<link rel="preload" href="..." as="style">

<link rel="preload" href="..." as="style" onload="this.rel='stylesheet'">

<link rel="stylesheet" href="/site-header.css">
<header>…</header>

<link rel="stylesheet" href="/article.css">
<main>…</main>

<link rel="stylesheet" href="/comment.css">
<section class="comments">…</section>