加載CSS和性能

Question

我正在用JS框架構建webpapp（基於ReactJS的InfernoJS）。

我想知道加載只有有用的CSS有多重要。 在JS Framework網站（包含angularjs，Reactjs ...）中，您的所有加載的路由都有CSS，但取決於您的頁面，您可能只需要網頁上20％的CSS規則。

例如： 您對ComponentA有'/ about'，對於JS Framework網站，您將在'/ home'頁面上爲ComponentA加載CSS，但在這種情況下，CSS無關緊要。

我不知道如果開發代碼只加載組件顯示的CSS將真的提高我的表現espcially爲搜索引擎優化。

瀏覽器如何處理未使用的CSS？ 它是否加載到內存中，等待查找可應用的元素？ 每個瀏覽器都一樣嗎？

編輯： @Psi部分回答它。我將重新制定它以使其更易於理解。

在JS框架基礎上，你的頁面被分割成不同的組件，大多數時候，你將有一個組件Header，Body，Footer。

所以如果我走在'/ home'和'/ about'路徑上，組件的Header和Footer應該是相同的，但Body組件將會改變。 因此，爲了優化，我正在考慮每次加載頁眉和頁腳組件的CSS。但是，加載的CSS應該根據路由而改變，如果我改變路由（頁面不重載，它由JS處理），另一個Body組件將被加載，但是我將擁有CSS的Body元素先例路線。事實上，一般來說，您的網站的每條路線都具有CSS的全部正文組件。

所以你有很多未使用的CSS規則。所以，通過添加和刪除<link>來改變加載的CSS應該是有趣的，否則我可能會花費太多的精力來完成它，瀏覽器對它有足夠的優化？

Answer 1

要回答你的問題，你需要經過幾層思考。

首先：當然，每一個被加載到你的頁面的CSS將採取它需要保持它活躍的記憶，因爲你的HTML頁面（雖然它可能是靜態的）可能可以動態地改變（例如$ .addClass）。因此，瀏覽器知道當前正在使用哪些樣式，但無法確定未來可能的元素，因此被迫將每個css定義保存在內存中（或分頁到磁盤上）。

第二件事是加載時間。根據您的css的加載順序，您可能會遇到以下情況：首先加載頁面，之後再應用css。這甚至可以被用戶看到，在開始時呈現非風格的頁面，並在稍後得到它的樣式！

即使只通過@import或<link rel="stylesheet">加載必要的CSS，所以最好的方法是在html中提供css（在將html呈現給頁面時動態加載它）。

這將減少加載時間兩種方式：

當加載通過引用（即@import或<link>），瀏覽器開始打開一個新的連接（或使用相同的連接後，您的HTML已經完全轉移）的CSS並請求在您的HTML鏈接的CSS。因此，瀏覽器

• 負載雖然沒有CSS已經被加載並儘快possble（總是）

• 需要額外的時間來建立一個新的連接或等待HTML顯示HTML代碼的HTML傳輸完成之前，它甚至開始加載css

• 如果使用的CSS加載非常晚，這可能是幾秒鐘的事！

雖然沒有問：

對於JavaScript，完全相反的希望在大多數情況下：因爲它是接收並預編譯該瀏覽器將立即開始執行腳本。當腳本引用的html尚未加載時，這可能會導致不需要的行爲。因此，除非您使用承諾確保頁面在執行之前已被加載，否則應儘可能將內聯javascript放置到頁面末尾。

[編輯]

，以配合您的其他問題：

這很難說。當然，優化後的css會比客戶端中的重載更好，但這會讓設計變得更加困難，因爲您必須跟蹤任何文檔中的任何更改並相應地調整您的css。此外，當您想更新某個類時，它可能會導致不同頁面上的相同類之間存在差異（例如，頁面1中的頭部頁面與頁面2中的.headline不同）。

如果您自動（動態地）生成樣式表，則可以通過在優化中付出努力，而不是通過減少樣式表解析時間來節省更多的開銷。