HTMLとリソースがどのように読み込まれるかを理解します

このブログのすべてのコンテンツは、クリエイティブコモンズライセンスの下でライセンスされています。このコンテンツを引用する場合は、ソースであるZhu Taoを維持し、非営利で引用してください。

導入

私はいくつかの Web ベースのプロジェクトを完了し、フロントエンドの js、css、html とバックエンドの python/php がどのように相互作用し、ブラウザーがそれらを実行するかを学びました。しかし、1 つの疑問が常に頭に残っていました。

HTML には複数の外部リソース (js、css、flash、画像など) があります。これらのリクエストはいつダウンロードされ、実行されるのでしょうか?

私が書いた js がいつ実行されるのかはわかりませんし、多くの高パフォーマンスの提案が html の下部にある </body> の前に js を置くことになっている理由もわかりません。

よく分からない場合は、ぜひ私と一緒に学んでください。

具体的な分析

まず、次のようなサンプル HTML ページを見てみましょう。

 <html>
  <ヘッド>
   <script src= "/static/jquery.js"タイプ= "text/javascript" ></script>
   <script src= "/static/abc.js"タイプ= "text/javascript" >
   </スクリプト>
   <link rel= "スタイルシート" type= "text/css" href= "/static/abc.css" ></link>
   <スクリプト>
    $(ドキュメント).ready(関数(){
     $( "#img" ).attr( "src" , "/static/kkk.png" );
   });
   </スクリプト>
  </head>
  <本文>
  <div>
  <img id= "img" src= "/static/abc.jpg"スタイル= "幅:400px;高さ:300px;" />
  <script src= "/static/kkk.js"タイプ= "text/javascript" ></script>
  </本文>
</html>

以下のリソースがあります:

3 つの外部 js ファイル、1 つのインライン js コード
外部 CSS ファイル 1 つ、インライン CSS コード 1 つ
1 つの画像ファイルと、js によって要求された 1 つの画像

合計で 6 つの HTTP リクエストがあります。

分析する前に、次に示すように、この HTML に対する Firefox のリクエストの結果を見てみましょう。

次の図に示すように、この HTML に対する Chrome (Linux) のリクエストの結果を見てみましょう (図は比較的小さいので、新しいタブで開くことができます)。

まず分析し、次にこれら 2 つのリクエストの結果の違いについて説明します。

リクエスト分析

まず、以下の説明は主に私自身の Google 検索、友人への相談、SO や IRC での入手に基づいていることを指摘しておきます。私は関連する仕様を読んでいません (もちろん読みたいと思っていますが、関連する仕様をご存知の場合はメッセージを残してください。ありがとうございます)。また、その正確性や精度を保証することはできません。リスクはご自身の責任でお願いします :D。

関連する調査に基づいて私が理解しているのは、URI リクエストの場合、ブラウザは次のリクエストと実行の順序に従うということです。

1つのスレッドがDOM（つまりHTML、HTML内の外部リソースに関係なく）をダウンロードします。
別のスレッドがダウンロードされた DOM の分析を開始し、外部リソース (js、css、画像など) のダウンロードを開始します。
3 番目のスレッド (存在する場合) は、スレッド 2 によってダウンロードされるリソース以外の外部リソースをダウンロードします。
より多くの接続が許可されると、より多くのスレッドが他のリソースのダウンロードを継続します。

リクエストが同時に持つことができる接続 (スレッド) の数は、ブラウザによって異なります。http1.1 標準では、同じサーバー/プロキシ (つまり、ホスト名) に対して 2 つを超える接続は許可されないと規定されていますが、実際のブラウザ実装では、詳細は次のとおりです。

ファイアフォックス2:2
ファイアフォックス3:6
オペラ 9.26: 4
Opera 9.5 ベータ: 4
Safari 3.0.4 Mac/Windows: 4
IE7:2
IE8:6

ですので、実際の状況を踏まえて上記のダウンロード順序をご検討ください。

次に、実行順序（js 実行、css アプリケーションなど）を見てみましょう。

ブラウザがjsコードを「見る」限り、それは実行されます
ブラウザは下から下へ、行ごとに実行されます
js コードが関数またはオブジェクト内にある場合、その関数またはオブジェクトが呼び出されたときにのみ実行されます。
いわゆる直接コード（関数やオブジェクトにないコード）は上から下へ順番に実行されます。
CSSファイルがダウンロードされると、対応するスタイルもDOMに適用されます。
DOM がダウンロードされた後、onload または jQuery の $(document).ready() が実行されます。

実際のブラウザでは、<script> タグに遭遇すると、Firefox などの他のスレッドのダウンロードが自動的にブロックされます。このため、Web 開発では <script> タグを </body> の前に置くことが推奨されることが多いのです。

ただし、すべてのブラウザがブロックするわけではありません。たとえば、Chrome は他の接続をブロックしません。そのため、特定の負荷は特定のブラウザ実装を参照する必要があります。

ほとんどの場合、パフォーマンスが向上するため、<script></script> タグを </body> の前に置くことをお勧めします。

FirefoxとChromeのリクエスト分析

上の 2 つの図のリクエスト応答図をもう一度見てみましょう。

ファイアフォックス

以下の機能があります:

まずHTMLをダウンロードしてください
htmlのダウンロードが完了したら、外部ファイル（js、css、img）を上から下にダウンロードします。
jsは他の外部ファイルのダウンロードをブロックします
他のファイルも並行してダウンロードされます

クロム

以下の機能があります:

まずHTMLをダウンロードしてください
外部ファイル（js、css、img）を上から下にダウンロードします
各リソースのダウンロード順序は並列です

js を並列にダウンロードできるとしたら、DOM の下のコードが最初に実行されるのでは、と疑問に思うかもしれません。まず、次の js が最初にダウンロードされたとしても、上から下への全体的な実行順序には影響しないことは確かです。ブラウザはこの順序を維持します。Chrome のこの方法は、将来のブラウザのトレンドでもあり、これが Chrome が高速化できる理由の 1 つです。

興味深いエピソード

この質問をした後、私は多くの調査を始めました。友人に相談したり、SO で質問したり、Firefox IRC でも質問したりしました。

私に答えてくれた友人たちは皆、とても辛抱強く答えてくれました。しかし、彼らのほとんどは私に質問をしました。「Web 開発を行うときに、なぜこれらの詳細を知る必要があるのですか?」

私はいまだにそのような疑問に困惑しています。優れたプログラマーは、方法だけでなく、何を、そしてなぜを知る必要があると私は常に信じてきました。

方法を知っているということは、他の人が提供するものを簡単に使用して開発できる、有能なプログラマーであることを意味します。

理解するということは、舞台裏で物事がどのように行われているかに注意を払い始めることを意味します。時間が経つにつれて、徐々に経験豊富なプログラマーになります。

理由を知ることは、あなたがハッカーになる道を歩み、徐々に技術専門家の道へと進んでいることを意味します。長期的には、大きく成長します。ハッカーになる方法を参照してください。

表面的な幸せにとどまるのではなく、細部や本質的な幸せを楽しみましょう。

結論は

ブラウザは、独立系 (Firefox、Chrome、IE、Opera、Safari) か、特定のカーネルに基づくもの (Aoyou、Sogou、TT、360 など) かを問わず、すべての主要メーカーが競争している市場ですが、ブラウザがより強力になり、標準に準拠し、応答が高速化されるなど、Web プログラマーとしての私たちの生活がはるかに良くなることは間違いありません。

この記事の一部の詳細はまだ不明瞭なので、後で別の記事を書いて、より徹底的かつ明確な説明をする予定です。

議論を歓迎します。