Css 使用引导时优化关键渲染路径

如果我使用BootsRap3，是否可以优化关键渲染路径（类似于Google和Facebook所做的）

Facebook只是内联了与标题和边栏相关的样式。 谷歌内联了所有样式，因为它们没有太多的主页样式

这里的问题是，假设我想要内联与我的标题相关的样式，它将由引导使用的10多个类组成（

容器流体

，

行

，

col-lg-10

，

col-lg-offset-2

，等等）。 内联引导是个坏主意，因为它超过了100kbs

我想加载上面的折叠内容，真的很快

---

有没有聪明的方法？你有什么建议吗？

我现在还不想开始做串联样式，在你需要走这条路之前，有很多优化可以做。此外，HTTP请求中重复样式的性能（可能是一把双刃剑）和维护噩梦也是一个巨大的折衷

在头部加载CSS

在主体的末端加载JS

自定义引导以仅包含所需的最低样式。

捆绑&在单独的捆绑包中最小化与头文件相关的文件，考虑隔离引导组件。捆绑提供了缓存和缩小

单页应用程序，在初始加载页面时要明智，并在html模板中使用模块/web组件实现ajax

使用CDN，因为每个主机有最大的http连接

---

可以在

中找到更多信息。简而言之，出于性能原因，您不应该添加额外的内联代码。最小化加载时间的最佳方法是（如上所述）使用引导定制器删除您不需要的任何类，并在发送之前缩小和gzip（如果可能）。大多数情况下，你需要的比100kbs引导css少得多

但是，在浏览器中呈现元素的成本比将类应用于元素的成本更高。您只能将加载时间最小化到某一点

---

你还没有告诉我们你期望什么样的表现；但是，如果超高速加载头是一种生死攸关的情况，是的，您应该使用内联代码。

这种技术独立于您的框架，在这种情况下是引导。 你必须想出一个办法来找出你的关键CSS，你可以提取和内联到你的HTML文件。 有很多方法可以做到这一点：

• 自定义关键CSS文件（手动创建）
• 在CSS文件中键入注释，这些注释可以在编译/构建时提取：
• 自动使用like

此主题太大，无法在短时间内回答，因此请随意阅读上面列出的主题：

工具：

---

应用CSS规则是一个非常快速的过程——CSS本身不太可能是问题所在。通常情况下，网络IO是瓶颈，这意味着合并和精简的css/js通常足以使事情尽可能快地进行。避免FOUC应该通过将结构化css移动到其单独的文件中来轻松实现。例如，仅包含大小和定位规则（显示、位置、宽度、高度、边距、边框、填充）的文件，仅用于呈现页眉/页脚/侧边栏（主视图）。内联关键CSS在避免FOUC和空页方面有很大的不同。在开始构建CSSOM之前，页面的加载速度似乎要快得多，因为它不需要等待额外的网络响应。