コード日進月歩

しんくうの技術的な小話、メモ、つれづれ、など

CSSのロードが遅くてHTMLがちらつくFOUC(Flash of unstyled content)についてざっくりまとめる

日本語情報が無いのでざっくり書いてみる

出典元

Flash of unstyled content - Wikipedia

上記のWikipedia曰く

CSS @importルールを使用している一部のページでは、MS Internet ExplorerWindows版で、スタイル化されていないページのコンテンツが一瞬フラッシュするという奇妙な表示の奇妙な現象が発生します。私はこの現象を「スタイル化されていないコンテンツのフラッシュ(Flash of Unstyled Content)」、略して「FOUC」と呼んでいます。 - Flash of Unstyled Content (FOUC)

もともとはIEで発生する現象が期限で、そこからスタイルの影響のコンテンツのちらつきに関して「FOUC」と呼ぶようになった様子。

FOUCが起きるとき

FOUCの原因はケースバイケース、HTMLの記述の問題だったり、ブラウザの機能のせいだっったり、つかっているJSのライブラリのせいだったりさまざま。

確認ポイントとしては以下のようなものがある

関連リンク