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

Question

如果我使用Bootsrap 3,是否可以优化关键渲染路径(类似于谷歌和Facebook正在做的事情)？

Facebook刚刚介绍了与标题和侧边栏相关的样式.Google概述了所有样式,因为它们的主页没有太多样式.

这里的问题是,比方说,我想内联与我的标题样式,这将包括从启动时使用过10 classses(的container-fluid,row,col-lg-10,col-lg-offset-2,等).并且内联引导是一个坏主意,因为它超过100kbs

我想加载折叠内容,非常快.

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

Answer 1

我还不会开始做内联样式，在您需要走这条路之前，可以进行许多优化。另外，还有一个巨大的权衡，HTTP 请求中重复样式的性能（可能是一把双刃剑）和维护噩梦。

1. 在 head 中加载 CSS。
2. 在正文末尾加载 JS。
3. 自定义引导程序以仅包含所需的最少样式。 http://getbootstrap.com/customize/
4. 将标头相关文件捆绑并最小化到单独的捆绑包中，考虑隔离引导程序组件。捆绑提供了缓存和缩小。
5. 单页应用程序，请明智地对待您的初始加载页面，并使用模块/Web 组件在 html 模板中进行 ajax。
6. 使用 CDN，因为每个主机有最大 http 连接数。

更多信息请访问https://developer.yahoo.com/performance/rules.html