web-dev-qa-db-ja.com

スタイルシートのrel = preloadがダウンロードされたスタイルを適用しない

rel=preloadを初めて試し、いくつかのスタイルシートに使用します。問題のコードは次のとおりです。

<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を削除すると、完全に正常に動作します。

行方不明のものはありますか？

cssgoogle-chromepreload
14
Denno

Rel = stylesheetとrel = preloadの各行に2行必要です。プリロードは単にそれをフェッチするだけで、適用しないためです。

ただし、1つの行が他の行の直前に到達するため、パフォーマンスの向上には気付かないでしょう。

より良いオプションは、スクロールせずに見えるcss（ ここを参照 ）をインライン化し、javascriptを使用してページ読み込み時にcssファイルにを追加することです（ ここを参照 ） 。

11
John

このアプローチについてどう思いますか：

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

リソース： https://www.filamentgroup.com/lab/async-css.html

18
M. Paulikas