このブログのすべてのコンテンツは、クリエイティブ コモンズ ライセンスの下でライセンスされています。このコンテンツを引用する場合は、ソースである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>
以下のリソースがあります:
合計で 6 つの HTTP リクエストがあります。 分析する前に、次に示すように、この HTML に対する Firefox のリクエストの結果を見てみましょう。 ![]() 次の図に示すように、この HTML に対する Chrome (Linux) のリクエストの結果を見てみましょう (図は比較的小さいので、新しいタブで開くことができます)。 ![]() まず分析し、次にこれら 2 つのリクエストの結果の違いについて説明します。 リクエスト分析まず、以下の説明は主に私自身の Google 検索、友人への相談、SO や IRC での入手に基づいていることを指摘しておきます。私は関連する仕様を読んでいません (もちろん読みたいと思っていますが、関連する仕様をご存知の場合はメッセージを残してください。ありがとうございます)。また、その正確性や精度を保証することはできません。リスクはご自身の責任でお願いします :D。 関連する調査に基づいて私が理解しているのは、URI リクエストの場合、ブラウザは次のリクエストと実行の順序に従うということです。
リクエストが同時に持つことができる接続 (スレッド) の数は、ブラウザによって異なります。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 アプリケーションなど)を見てみましょう。
実際のブラウザでは、<script> タグに遭遇すると、Firefox などの他のスレッドのダウンロードが自動的にブロックされます。このため、Web 開発では <script> タグを </body> の前に置くことが推奨されることが多いのです。 ただし、すべてのブラウザがブロックするわけではありません。たとえば、Chrome は他の接続をブロックしません。そのため、特定の負荷は特定のブラウザ実装を参照する必要があります。 ほとんどの場合、パフォーマンスが向上するため、<script></script> タグを </body> の前に置くことをお勧めします。 FirefoxとChromeのリクエスト分析上の 2 つの図のリクエスト応答図をもう一度見てみましょう。 ファイアフォックス以下の機能があります:
クロム以下の機能があります:
js を並列にダウンロードできるとしたら、DOM の下のコードが最初に実行されるのでは、と疑問に思うかもしれません。まず、次の js が最初にダウンロードされたとしても、上から下への全体的な実行順序には影響しないことは確かです。ブラウザはこの順序を維持します。Chrome のこの方法は、将来のブラウザのトレンドでもあり、これが Chrome が高速化できる理由の 1 つです。 興味深いエピソードこの質問をした後、私は多くの調査を始めました。友人に相談したり、SO で質問したり、Firefox IRC でも質問したりしました。 私に答えてくれた友人たちは皆、とても辛抱強く答えてくれました。しかし、彼らのほとんどは私に質問をしました。「Web 開発を行うときに、なぜこれらの詳細を知る必要があるのですか?」 私はいまだにそのような疑問に困惑しています。優れたプログラマーは、方法だけでなく、何を、そしてなぜを知る必要があると私は常に信じてきました。 方法を知っているということは、他の人が提供するものを簡単に使用して開発できる、有能なプログラマーであることを意味します。 理解するということは、舞台裏で物事がどのように行われているかに注意を払い始めることを意味します。時間が経つにつれて、徐々に経験豊富なプログラマーになります。 理由を知ることは、あなたがハッカーになる道を歩み、徐々に技術専門家の道へと進んでいることを意味します。長期的には、大きく成長します。ハッカーになる方法を参照してください。 表面的な幸せにとどまるのではなく、細部や本質的な幸せを楽しみましょう。 結論はブラウザは、独立系 (Firefox、Chrome、IE、Opera、Safari) か、特定のカーネルに基づくもの (Aoyou、Sogou、TT、360 など) かを問わず、すべての主要メーカーが競争している市場ですが、ブラウザがより強力になり、標準に準拠し、応答が高速化されるなど、Web プログラマーとしての私たちの生活がはるかに良くなることは間違いありません。 この記事の一部の詳細はまだ不明瞭なので、後で別の記事を書いて、より徹底的かつ明確な説明をする予定です。 議論を歓迎します。 追記今回は出費を惜しみませんでした。以前から SO 評判ポイントを 400 ポイント近く貯めていたため、すぐに 150 人を派遣して最も満足のいく回答を見つけてもらいました。 詳細については以下を参照してください。 Web ページの読み込みと実行のシーケンスは? 投稿内にさらに詳しい回答がありますので、参考にしてください。 参考文献
|
<<: MySQL 同期遅延が発生したときに Seconds_Behind_Master が 0 のままになる理由
>>: VMwareワークステーションとデバイス/資格情報の非互換性によって発生する起動エラーについて
binlog は、MySQL のすべての DML 操作を記録するバイナリ ログ ファイルです。 bi...
1. this.$router.push() 1. ビュー <テンプレート> <d...
HTML ボタン自体を中央に配置するにはどうすればよいでしょうか? このアイデアは簡単に見つかります...
<br />前回の記事:Webデザイン講座(4):素材と表現について Webデザイン上級...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
目次1. 効果の実証2. 実装チュートリアル3. 最後に、完全なコードを添付します4. その他の右ク...
最近、ストアド プロシージャの名前を変更する機能を使用しました。インターネットで情報を検索しましたが...
ご存知のとおり、私たちが毎日閲覧する Web ページ、Web サイト、または Web ページには独自...
Web デザイン 5 におけるシンプルな XHTML Web フォーム。 テクニック 1: ラベル ...
1. 基礎知識(日付オブジェクトのメソッド) 😜 getFullYear() は年を表す4桁の数字を...
導入悠宇希の原文です。 vite は Vue CLI に似ています。vite も、基本的なプロジェク...
MySQL ストレージ エンジンの概要ストレージ エンジンとは何ですか? MySQL のデータは、さ...
以下のように表示されます。 XML/HTML コードコンテンツをクリップボードにコピー<htm...
記録として、将来使用される可能性があり、困っている友人も使用できます。 BBはもうやめて、まずはレン...
開発の問題点開発プロセスでは、データベース フィールドが頻繁に変更されるため、RD 環境と QA 環...