@import と link_html/css_WEB-ITnose の違いと選択-htmlチュートリアル-php.cn

@import と link_html/css_WEB-ITnose の違いと選択

WBOY

リリース： 2016-06-24 11:50:46

オリジナル

1273 人が閲覧しました

link

1 <head>2     <link rel="stylesheet" type="text/css" href="sheet1.css" media="all">3 </head>

ログイン後にコピー

@import

1 <style type="text/css">2     @import url(sheet1.css);      3 </style>

ログイン後にコピー

Difference

読み込み順序:

Linkまず CSS ファイルを Web ページにロードし、それからコンパイルします。 @import は最初に HTML 構造を読み込み、次に CSS ファイルを読み込みます。ネットワーク速度が遅い場合、視覚効果に影響します。

link は css ファイルが並行してダウンロードされることを保証し、@import は 1 つずつダウンロードされます。

IE では、リンクにより @import がブロックされ、読み込み時間が長くなります。また、複数の @import を使用すると、リソースファイルのダウンロード順序が乱れ、js の問題が発生します。

互換性: link は xhtml タグであり、互換性の問題はありません。@import は css2.1 によって提案されているため、IE5 より前のブラウザはサポートされていません。

DOM サポート: link は DOM 変更スタイルをサポートしますが、@import はサポートしません。

さらに、リンクタグはjsファイルを呼び出したり、ディレクトリを宣言したりすることもできます。@importはCSSをロードすることしかできません。

Use link:

リンクを選択して、ロードするメディアを選択します。上記の読み込み、互換性、IE の理由により、通常のサイトはリンクを使用するようにしてください。

Use @import:

大規模なポータル Web サイト (淘宝網など) の複数のページが同じ CSS ファイルにリンクしている場合、@import はモジュール管理を容易にするために CSS にスタイルシートを読み込むため、速度が低下する可能性があります。 css の。

参考文献:

高パフォーマンスのウェブサイト設計: @import

を使用しないでください

[議論] @import がスタイルシートを呼び出す利点は何ですか?

@import による外部スタイルシートのインポートと外部スタイルシートへのリンクの違い