Google PageSpeed Insights 将此标记为我应该修复的问题 - 我已在 https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery 阅读了关于优化 CSS 交付的指南。但我对什么是最佳实践感到困惑，以及哪些资源会阻塞渲染，哪些不会？
Google 是否建议从页眉中删除样式表链接并替换为内联样式以呈现某些内容，然后使用 Javascript 在 window.onload 触发时触发加载外部样式表？这不会延迟到达“正确呈现”页面的过程 - 浏览器尽快开始下载 CSS 不是更好吗？
最佳答案
是的，这几乎就是您引用的页面推荐的内容。将最少量的 CSS(只要是少量的)直接放在 <style> 内的 HTML 标记中。标签。然后在文档末尾包含完整的样式集。 (在这个例子中，它实际上并没有通过 JavaScript 本身加载；相反，外部样式表的链接被放置在 <noscript> 标签中。这有点 hack，但它完成了工作。你也可以请求通过 AJAX 样式表并直接使用 JavaScript 注入(inject)它。)
此方法仅在您可以隔离页面所需的最少 CSS 并且该 CSS 数量相当少时才有效。例如，如果您正在构建一个单页 Web 应用程序，那么您的许多 CSS 规则可能适用于应用程序的部分而不是初始 View 。在那种情况下，那些额外的规则可以放在外部样式表中。或者，也许您对弹出对话框有一套严格的规则。这些规则也可以推迟。
如果您不能真正将您的规则分为最初需要的规则和不需要的规则，并且如果您的最小规则集很大，您就无法利用这种方法。
关于javascript - 消除呈现阻塞的 JavaScript 和 CSS - 需要建议，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20594979/