差リンクと@importは何ですか?

文法構造をリンク:

<リンクのhref = "URL" のrel = "スタイルシート" タイプ= "テキスト/ cssの">

 

@import構文構造:

ファイルに使用するCSSの@import urlには、スタイルシートを導入し、複数のスタイルシート、修正および拡張が容易なだけのスタイルシートのいずれかが必要ですページ、

  HTMLでの1

    <スタイルタイプ= "テキスト/ cssの">

      @import URL

    </スタイル>

  CSSで2

    @import URL

 

リンクと@importの違い:

1.異なる文法構造

1.1 <リンクのhref = "URL" のrel = "スタイルシート" タイプ= "テキスト/ cssの">

1.2 @importのURL

2.異なる性質

<link>タグが属し、使用するためのHTMLコードに配置することができ、及び@importのCSSスタイルとして見ることができる、CSSスタイルを導入することができる(<link>タグは、HTML、CSSと@importが設けられている属します)

3.ページのロード

ページのロードは、<リンク>が同時にロードされ、@importを引用される場合は、ページがリロード読み込みが完了するまで、CSSは待機します

4.互換性。

のみ上記IE5に認識することが@import、及び<link>タグは、HTMLで、互換性の問題

5.優先順位

か<リンク>又は@import、基準負荷に応じて優先順位、高優先順位をロードした後

6.制御

JSの使用は、変化パターンDOMの<link>タグを制御するために使用することができます

 

なぜCSSの@importを避けます

提案されているWebフロントエンドの最適化では、このように下側の負荷のCSS CSSと同等であるため、CSSの@importを使用することは推奨されませんので、@importは、ページの読み込みの遅延を増加します

使用@importファイルの参照が解析され、それにCSSファイルがダウンロードされていることだけで単語を参照しているため、遅延が増加する理由としては、ブラウザをダウンロードするには、別のCSSの必要性がある知っている、あなたは中になりたいでしょうし、その後、その後、一連の操作を構築するために、ツリーをレンダリングし解析します。したがって、CSS CSSの@importは長いので、空白のページの解析を遅らせる原因になります。<link>タグ方式を使用して、CSSの@importを避ける導入します

 

 

 

おすすめ

転載: blog.csdn.net/qq_39394518/article/details/94470301