ほんの一例 - 10秒のCSSファイルをスリープ
<!DOCTYPE html>
<html>
<head>
<link href='http://2.cuzillion.com/bin/resource.cgi?type=css&sleep=10&n=2&t=1379426970&.css?v=1010' rel='stylesheet' />
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Hello world は 10 秒で表示されます
現在のブラウザーは、リンクされたスタイルシートが完全に読み込まれると、リンクされたスタイルシートの後にコンテンツをレンダリングします。これにより、コンテンツのちらつきが回避されます。そうしないと、スタイルシートのルールが適用されていないページが常に短時間表示されます。
また、スタイルシートには 10 秒の遅延があるため、それ以降のページ レンダリングの部分も 10 秒遅延します。
これは、スタイルシートだけでなく、スクリプト (async 属性で読み込まれない) にも当てはまります。
EDIT
のコメントへRyan Kinal。ブラウザには複数のパスがあります。HTMLコードを解析し、見つかったリソースのダウンロードを開始するもの。そして、リソースを実行し、html を順番にレンダリングする1 つのパス。そのため、スタイルシートとスクリプトは必ずしも順番に読み込まれるとは限りません。唯一の重要な部分は、それらが html 構造に表示される順序で適用/実行されることです。
それは、物事を段階的に行うことが求められる建設マニュアルのようなものです。作る前に読めます。必要なアイテムを注文します。ただし、そのステップに必要なアイテムを受け取った時点でのみ、次のステップに進むことができます。したがって、最初の部分以外をすべて受け取った場合は、構築を開始できません。
Google-Developer: ドキュメント ヘッドに CSS を配置する
[...] すべての外部スタイルシートがダウンロードされるまで、ブラウザーは Web ページのレンダリングをブロックします。[...] したがって、外部スタイルシートやインライン スタイル ブロックへの参照をページの先頭に配置することが重要です。スタイルシートが最初にダウンロードされて解析されるようにすることで、ブラウザーがページを段階的にレンダリングできるようにすることができます。[...]
Google-Developer: スタイルとスクリプトの順序を最適化する
[...] JavaScript コードは Web ページのコンテンツとレイアウトを変更できるため、スクリプトがダウンロード、解析、実行されるまで、ブラウザはスクリプト タグに続くコンテンツのレンダリングを遅らせます。ただし、往復時間に関してさらに重要なことは、スクリプトがダウンロードされて実行されるまで、多くのブラウザーが、スクリプトの後にドキュメントで参照されているリソースのダウンロードをブロックすることです。一方、JS ファイルを参照する際に他のファイルがダウンロード中の場合は、それらと並行して JS ファイルがダウンロードされます。[...]
MDN: 読み込みの速い HTML ページを作成するためのヒント: ファイル数を最小限に抑える
ブラウザは、ページをレンダリングする前に、各 CSS または JavaScript ファイルの変更時刻を確認する必要があるため、参照ファイルの最終更新時刻のクエリに時間がかかりすぎると、Web ページの最初の表示が遅れる可能性があります。
</script>従来、ブラウザーでは、HTML パーサーはメイン スレッドで実行され、スクリプトがネットワークから取得されて実行されるまで、タグの後でブロックされていました。Firefox 4 以降の HTML パーサーは、メインスレッドからの投機的解析をサポートしています。スクリプトがダウンロードされて実行されている間、先に解析します。Firefox 3.5 および 3.6 と同様に、HTML パーサーは、ストリーム内で先に見つかったスクリプト、スタイル シート、および画像の投機的ロードを開始します。ただし、Firefox 4 以降では、HTML パーサーも HTML ツリー構築アルゴリズムを投機的に実行します。利点は、投機が成功したときに、スクリプト、スタイル シート、および画像について既にスキャンされた受信ファイルの部分を再解析する必要がないことです。欠点は、投機が失敗したときに失われる作業が増えることです
元の回答で申し訳ありませんが、質問を間違って読みました:
わかりましたので、ブラウザは html ファイルを上から下に解釈します。これにより、実際の html をレンダリングする前に、ブラウザにリンクされているすべてのファイルがダウンロードされます。
このため、かなり大きくなる可能性があるため、例としてファイルの下部に JavaScript をロードすることをお勧めします。
非常に大きな遅延を引き起こす可能性のある実際のファイルサイズに関して、実際に大きな css ファイルを見たことがありません。
また、html の下部に css をロードすることの意味もわかりません。おそらく誰かがこれを明確にすることができます。
試す：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Hello Plunker!</h1>
</body>
<link href='http://2.cuzillion.com/bin/resource.cgi?type=css&sleep=10&n=2&t=1379426970&.css?v=1010' rel='stylesheet' />
</html>
アップデート
t.niese の回答を参照してください css を一番下に置くべきではない理由