帶嵌入式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。