2017-12-14 21 views
0

次のビュー用にCSSファイルをプリフェッチします。ただし、ブラウザがプリフェッチしたCSSファイルは機能しませんでした。プリフェッチされたCSSが機能しませんでした

<link rel="prefetch" href="/modules/style/common.css"> 

そしてchromeDevでNetworkを示しています:それは私の使い方だ enter image description here

私はprefetchを使用し、直接次のようにCSSファイルをインポートあきらめ、CSSルールの作業:

<link rel="stylesheet" type="text/css" href="/modules/style/common.css"> 

今回はchromeDevのNetworkが表示されます: enter image description here

私が見ることができる違いはtypeの赤いボックスで示されています。誰も私にこれを解決する方法を教えてもらえますか?私はグーグルで答えはありません。

+0

私は混乱しています - あなたはそれが働いていると言っています、あなたは何を解決しようとしていますか? –

+2

'prefetch'ではなく' preload'を使いましたか? MDNによると、 "ブラウザはプリフェッチリソースにプリロードリソースよりも低い優先順位を与えます" – j08691

+0

優先順位は@ j08691と異なり、プリフェッチイメージは最も低く、もう1つは最高です。 – Scath

答えて

0

プリフェッチヒントは、次のページで必要となるリソースのプリフェッチに関するものです。 2ページあるとします。

  • /インデックス
  • /ポストは

ポストはpost.cssファイルが必要です。インデックスページは、ユーザが投稿ページにナビゲートすることを「知っている」。したがって、インデックスページは、post.cssをプリフェッチするようにブラウザに指示します。

<link rel="prefetch" href="/css/post.css">

しかし、投稿ページには、とにかくそれを使用するようにブラウザを教えてください。

<link rel="stylesheet" type="text/css" href="/css/post.css">

post.cssがすでにプリフェッチされているので、ブラウザがキャッシュからそれを提供します。

Btw、私はユーザーがサイト上をどのようにナビゲートするかを分析するオープンソースプロジェクト(https://github.com/sirko-io/engine)に取り組んでいるため、次のページで必要とされるリソースを事前に集めることができます。このプロジェクトの目的は、プリフェッチヒントが意味をなされたときに自動的に追加することです。

関連する問題