rel =預加載樣式表不適用一次下載的樣式

我第一次嘗試rel=preload，將它用於幾個樣式表。這是有問題的代碼：rel =預加載樣式表不適用一次下載的樣式

<link rel="preload" href="css/styles.css" as="style"> 
<link rel="preload" href="//allyoucan.cloud/cdn/icofont/1.0.0beta/css/icofont.css" crossorigin="anonymous" as="style">

我測試在Chrome 61，我可以看到，如預期的樣式表被下載，但他們從來沒有實際應用，而我得到的控制檯上的消息說預加載的資源沒有被使用。

如果我刪除rel=preload而不是rel=stylesheet，那麼它工作得很好。

有什麼我失蹤了嗎？

來源

2017-10-17 Denno

是否包含'<鏈接相對= 「樣式」>'爲他們每個人的呢？預加載在這種樣式表上並不是很有用，因爲它們已經在''中了。 – Ryan

噢，對不起，我在網上的例子中錯過了。謝謝 – Denno

您需要爲每個rel = stylesheet和一個rel = preload創建兩行。由於預加載只是提取而不是應用。

但是，您可能不會注意到很多性能改進，因爲它在另一行之前遇到了一行。

更好的選擇是內聯CSS上的css（see here），然後使用javascript在頁面加載（see here）中添加css文件。

來源

2017-10-17 10:36:58 John

同樣的答案在這裏，我回復了Ryan的評論。我只有一個小應用程序，所以可能沒有太多的意思，試圖使用預加載的所有..謝謝深入的答案 – Denno

我同意所有取決於應用程序，我已經看到顯着節省這樣做的大型應用程序但保持可管理性還是相當不錯的。 – John

你怎麼看待這種方法是什麼：

<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">

資源：https://www.filamentgroup.com/lab/async-css.html

來源

2018-02-12 16:49:45

rel =預加載樣式表不適用一次下載的樣式

回答

相關問題