Polymer JS with Embedded CSS



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

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

谢谢R

Polymer 鼓励在元素的

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

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

通过将这些资源编译到一个文件中,我们还简化了导入和使用聚合物组件的过程:您只需<link rel="import" href="my-element.html">就可以使用了。如果每个 Polymer 元素的 JavaScript 和 CSS 都在单独的外部文件中,那么 HTTP 请求往返次数将是 2-3 倍!(前提是您没有硫化,对于生产环境,您应该这样做)

另一个附带的好处是UX:因为你的元素只有在加载Polymer之后才会就地"升级"(而不是在HTML被解析为DOM时立即升级),所以拥有元素定义及其样式意味着你的用户永远不会看到FOUC。

最新更新