带嵌入式CSS的Polymer JS

Question

我们刚开始在我们的一个项目中使用Polymer JS实现Web组件.Polymer文档建议在出于性能原因的情况下将CSS包含在组件的样式标记中。

据我所知，需要在页面加载中尽早加载css文件。如何在组件中嵌入css可以提高性能？

谢谢， [R

Answer 1

Polymer鼓励在元素的HTML文件中包含元素的CSS的主要原因是，在元素初始化时，样式和元素的标记都可用。

这里的性能提升之一是浏览器不需要额外的HTTP请求来获取外部样式表：样式已经可用。

通过将这些资源编译到一个文件中，我们还简化了导入和使用Polymer组件的过程：您只需要<link rel="import" href="my-element.html">即可开始使用。如果每个Polymer元素在单独的外部文件中都有它的JavaScript和CSS，那么你的双向HTTP请求就会有2-3倍！ （假设您不是vulcanizing，那么您应该将其用于生产环境）

另一个好处是用户体验：因为你的元素只有在加载了Polymer之后就已经“升级”了（而不是当HTML被解析成DOM时），将元素定义及其样式放在一起表示您的用户永远不会看到FOUC。