ブラウザにはパラレルロードっつう並行してコンテンツを読み込む仕組みがあるんだけど、スタイルシートの @import 使って読み込む場合、このパラレルロード使えないってことをさっき知ったのでメモっておく。
ちなみにテストで使ったcssはPHPで作って1秒waitかけてる。
パラレルロードする場合
読み込みたいcssをhtmlにlinkタグで全部書いとけばいい。
<link rel="stylesheet" href="./base.php" /> <link rel="stylesheet" href="./1.php" /> <link rel="stylesheet" href="./2.php" />
Firebug使って計測するとこんな具合。1秒で読み込み終わり。
パラレルロードしない場合
ちょっと極端な例だけど、htmlにはcssを1個だけ読み込む記述を、
<link rel="stylesheet" href="./base.php" />
各cssには@importで読み込ませる記述を記述。
base.php
@import url('./1.php');
1.php
@import url('./2.php');
2.php
.hoge{};
Firebug使って計測するとこんな具合。3秒かかってる。見事に base.php → 1.php → 2.php の順に読み込まれている。
@importってほとんど使わないけど、こういう弊害があるってことを頭の片隅にいれとこう。