要約
- 原因: bodyでcss読み込みを行ったため
- 対策: 色々あるが今回はheadにcssを移動して解決
背景
UIを今風に実装したかった。
- UIのパーツ毎にテンプレートファイル(html)を分ける
- 同じ粒度でCSSファイルを分ける
- 各テンプレートファイルにlinkタグを埋め込む
- 結果としてbodyでCSSが五月雨式に読み込まれる
- これぞHTTP/2の為せる業
↓こういうのがたくさんあるイメージ
parts1.html
<link rel=stylesheet href="parts1.css"> /* パーツ毎にcss読み込み */
<div class="parts1">
...
</div>
メリット
- 必要最小限のcssを読み込める
- linkタグの管理が楽
症状と原因
bodyでcssを読み込むような実装をしてみたところ、FireFoxでちらつきが発生。
原因は、CSSが当たる前のDOMや画像が一瞬表示されていたため。
これはFOUC(Flash of Unstyled Content)と呼ばれている。
FireFoxは他のブラウザと異なり、bodyに挿入されたlinkタグを非同期で読み込む仕様らしい。
対策
幾つかの方法がある
(a) おまじない
以下のように空のscriptタグを読み込ませることでブロッキングできる。
parts1.html
<link rel=stylesheet href="parts1.css">
<script> </script>/* おまじない */
<div class="hoge">
...
</div>
(b) JS頼み
スタイルシートの読み込みが完了するまで要素を隠す処理をJSで書く。
全てをJSで解決する今風なやり方。
(c) bodyで読み込むのは諦める
headでcssを読み込んだ場合は同期的に読み込まれるので、ちらつきは起こらない。
JSを殆ど使用しないアプリを使っていたため、JSを書きたくなかった。今回はこの方法を取った。
参考文献
The future of loading CSS
https://jakearchibald.com/2016/link-in-body/
Bodyに<link rel=stylesheet>を入れてCSSをロードする未来
https://qiita.com/memolog/items/846a0bec2515cdcd721b