带嵌入式CSS的聚合物JS

Question

我们刚刚开始在我们的一个项目中使用Polymer JS实现Web组件.Polymer文档建议将CSS包含在组件的样式标签中，以便提高性能。

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

感谢， [R

Answer 1

的主要原因聚合物鼓励包括该元素的HTML文件本身就是让你的风格和你的元素的标记处的元素被初始化的时候都可以在您元素的CSS。

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

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

另一个好处是用户体验：因为你的元素只有在聚合物被加载后才进行“升级”（而不是在HTML被解析为DOM），元素定义及其样式并排表示您的用户永远不会看到FOUC。