👨‍❤️‍👨 🤚🏽 🤜🏼 @importを使用しないでください 🚿 🍽️ 🧒🏻

この記事では、Steve Soudersが、スタイルをドキュメントにロードするためにインポートを使用すべきでない理由の明確な証拠を提供します。

リンクと輸入

スタイルファイルをダウンロードするには2つの方法があります。 LINKタグを使用：

  <link rel = 'stylesheet' href = 'a.css'>

または、importを使用してファイルをインポートします。

  <スタイル>
 @import url（ 'a.css'）;
 </ style>

便宜上、LINKを使用しますインポートは常にスタイルブロックの最上部に配置する必要があることを忘れないでください。そうしないとインポートされません。

インポート インポート

LINKを使用してインポートするさまざまな方法について説明したいと思います。以下の例では、a.cssとb.cssの2つのスタイルファイルが登録されています。各ダウンロードファイルは、ダウンロード速度への影響を今後追跡するのに便利になるように、正確に2秒かかります。最初の例では、インポートを使用して両方のスタイルシートをロードします。 import importと呼ばれるこの例では、HTMLドキュメントに次のスタイルのブロックが含まれています。

  <スタイル>
 @import url（ 'a.css'）;
 @import url（ 'b.css'）;
 </ style>

常にインポートのみを使用してスタイルをロードする場合、パフォーマンスの問題は発生しませんが、以下で説明しますが、これによりJavaScriptエラーが発生する可能性があります。両方のファイルが並行してロードされます（図1を参照）しかし、スタイルシート内で、またはLINKと一緒にインポートを使用すると、問題が発生し始めます。

図 1。

リンクのインポート

LINK インポートの例では、LINKタグを使用してa.cssをロードし、b.cssをインポートします。

  <link rel = 'stylesheet' type = 'text / css' href = 'a.css'>
 <スタイル>
 @import url（ 'b.css'）;
 </ style>

IE（6、7、および8でテスト済み）では、図2に示すように、ファイルが次々と順次ロードされるという事実につながりました。したがって、IEでのページのロード時間が長くなります。

図 2

インポートでリンク

importを使用したLINKの例では、a.cssファイルはLINKを介してロードされ、内部にb.cssのインポートルールが含まれています。
ドキュメント内：

  <link rel = 'stylesheet' type = 'text / css' href = 'a.css'>

a.css内：

  @import url（ 'b.css'）;

この方法は、ファイルが並行してではなく、順次ダウンロードされるという事実にもつながります（図3）。しかし、これはIEだけでなく、他のブラウザーでも発生します。考えてみると、すべてが論理的です。ブラウザはa.cssをロードし、解析を開始します。インポートルールが内部で見つかると、b.cssファイルのロードが開始されます。

図 3。

インポートを伴うLINKブロック

前の例とのわずかな違いにより、IEで驚くべき結果が得られました。 LINKは、a.cssの呼び出しと、b.cssのインポートのみを含む新しいproxy.cssファイルの呼び出しに使用されます。
コード内：

  <link rel = 'stylesheet' type = 'text / css' href = 'a.css'>
 <link rel = 'stylesheet' type = 'text / css' href = 'proxy.css'>

proxy.cssで：

  @import url（ 'b.css'）;

IEでの実験結果を図4に示します。最初の要求はHTMLドキュメントです。 2番目の要求はa.css（2秒）です。 3番目はproxy.cssです。 4番目はb.css（2秒）です。そして驚くべきことに、IEはa.cssファイルが完全にダウンロードされるまで、b.cssのダウンロードを開始したくありません。他のすべてのブラウザーでは、このような驚きは発生せず、ページの読み込みが速くなります（図5を参照）。

link-blocks-import

図 4. IEでの結果。

link-blocks-import-not-ie

図 5.他のブラウザーでの結果。

たくさんの@imports

IEで複数のインポートルールを一度に使用すると、コードで指定された順序でファイルがロードされないという事実につながります。この例では、6つのスタイルファイル（各ファイルの読み込みに2秒かかります）を使用し、その後にJSスクリプト（4秒の読み込み）を使用します。

  <スタイル>
 @import url（ 'a.css'）;
 @import url（ 'b.css'）;
 @import url（ 'c.css'）;
 @import url（ 'd.css'）;
 @import url（ 'e.css'）;
 @import url（ 'f.css'）;
 </ style>
 <script src = 'one.js' type = 'text / javascript'> </ script>

図 6最も長いダウンロードがスクリプトであることがわかります。スタイルの後に指定されているという事実にもかかわらず、IEでは最初にロードされます。スクリプトに、使用するスタイル（getElementsByClassNameなど）に依存するコードが含まれている場合、次のようにスクリプトでエラーが発生する可能性があります。スタイルの前にロードします。

many-imports

図 6。

リンクリンク

LINKを使用してスタイルを読み込む方が簡単で安全です：

  <link rel = 'stylesheet' type = 'text / css' href = 'a.css'>
 <link rel = 'stylesheet' type = 'text / css' href = 'b.css'>

LINKを使用すると、すべてのブラウザーで並列ファイルダウンロードが提供されます（図7を参照）。また、LINKを使用すると、ドキュメントコードで指定されている正確な順序でファイルがダウンロードされます。

図 7。

特に悪いのは、ドキュメントに示されている順序とは異なる順序でリソースをロードできることです。すべてのブラウザは、スタイルを読み込む前に先読みしてインポートルールを取得し、すぐに読み込みを開始する必要があります。ブラウザがこれを実装するまで、インポートの使用を避け、LINKを使用してスタイルのみをロードすることをお勧めします。

ここにもコメントをお願いします。

@importを使用しないでください

リンクと 輸入