白い画面の問題と FOUC スタイルレス コンテンツのちらつき/非同期読み込み_html/css_WEB-ITnose

• FOUC のスタイルのないコンテンツの白い画面の問題と点滅する問題の理由を説明する前に、知っておく必要がある原則の 1 つは、ブラウザは読み込み時に画像と CSS を同時に読み込むということです (For.たとえば、2 つのファイルが 1 つのドメイン名で同時にロードされます)。ただし、JavaScript をロードすると同時実行が無効になり、他のコンテンツのダウンロードがブロックされます。

  白い画面の問題と FOUC のスタイルのないコンテンツがちらつくのはなぜですか?

• HTMLコードを書くとき、私たちは必ずCSSファイルの導入位置を先頭（タグ内）に、jsファイルの導入位置を最後（タグ内）に配置します。 ／本体＞フロント）。
• ブラウザーによって CSS と HTML の処理方法が異なります。一部のブラウザーは、HTML 要素をレンダリングして表示する前に CSS がロードされるのを待ちます (白い画面の問題)。最初に HTML 要素を表示し、CSS が読み込まれるのを待ってからスタイルを再度変更するものもあります (FOUC スタイルのないコンテンツが点滅します)
• CSS スタイルが下部に配置されている場合 (IE ブラウザの場合)、一部のシナリオ（新しいウィンドウを開く、更新するなど） @import タグを使用すると、CSS にリンクを配置しても、ページにコンテンツが徐々に表示されず、白い画面が表示されます。ヘッダーを選択すると、白い画面が表示される場合があります。
• IE ブラウザの場合、CSS スタイルを下部に配置すると、一部のシナリオ (リンクをクリック、URL を入力、ブックマークを使用して入力するなど) で、FOUC 現象が発生します (徐々に読み込まれます)。スタイルのないコンテンツなど。CSS がロードされた後、ページに突然スタイルが表示されます。Firefox の場合は、常に FOUC が表示されます。
• ヘッドに js ファイルを置くと、スクリプトは後続のコンテンツのレンダリングをブロックし、スクリプトは後続のコンポーネントのダウンロードをブロックして、白い画面の問題を引き起こします。

  非同期でロードします

• defer と asnyc は、スクリプトを非同期的にロードする 2 つの方法です。
• defer の場合、後続のドキュメント要素を読み込むプロセスは script.js の読み込みと並行して (非同期で) 実行されますが、script.js の実行はすべての要素が解析された後、次の要素が解析される前に完了する必要があります。 DOMContentLoaded イベントがトリガーされます。
• async、後続のドキュメント要素の読み込みとレンダリングのプロセスは、script.js の読み込みと実行と並行して (非同期で) 実行されます。