FireFoxでちらつき(FOUC)が起こる

要約

• 原因: bodyでcss読み込みを行ったため
• 対策: 色々あるが今回はheadにcssを移動して解決

背景

UIを今風に実装したかった。

• UIのパーツ毎にテンプレートファイル(html)を分ける
• 同じ粒度でCSSファイルを分ける
• 各テンプレートファイルにlinkタグを埋め込む
• 結果としてbodyでCSSが五月雨式に読み込まれる
• これぞHTTP/2の為せる業

↓こういうのがたくさんあるイメージ

<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タグを読み込ませることでブロッキングできる。

<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