ハイパフォーマンス Web 開発: JS をロードする方法と JS をどこに配置するか? _JavaScript スキル

外部 JS のダウンロードのブロック
すべてのブラウザーが JS をダウンロードすると、他のリソースのダウンロード、コンテンツのプレゼンテーションなど、他のすべてのアクティビティがブロックされます。 JS がダウンロード、解析、実行されると、他のリソースも並行してダウンロードされ、コンテンツが表示されます。

なぜ JS は CSS や画像のように並行してダウンロードできないのかと疑問に思う人もいるかもしれません。ここで、ブラウザがどのようにページを構築するかの原理を簡単に紹介する必要があります。
ブラウザがサーバーから HTML ドキュメントを受信し、その HTML をメモリ内の DOM ツリーに変換するとき、変換プロセス中に特定のノードが見つかった場合。 CSS または IMAGE が参照されると、別のリクエストが送信されて CSS またはイメージが返され、リクエストが返されるまで次の変換が続行されます。返されたコンテンツのみを DOM ツリーに入れる必要があります。の対応する位置でOKです。ただし、JS が参照されると、ブラウザは JS リクエストを送信し、リクエストが返されるのを待ちます。ブラウザには安定した DOM ツリー構造が必要であり、JS には、document.write や appendChild を使用したり、location.href を直接使用してジャンプするなど、DOM ツリー構造を直接変更するコードが存在する可能性が非常に高いため、ブラウザはJS が DOM ツリーを変更し、DOM ツリーを再構築する必要がないようにしたいと考えています。そのため、他のダウンロードとレンダリングがブロックされます。

ブロックされたダウンロードの図: 下の図は、blogjava ホームページへのアクセス時のウォーターフォール図です。開始がわかります。2 つのイメージが並行してダウンロードされ、次の 2 つの JS はダウンロードでブロックされます (それぞれ 1 つずつダウンロードされます)。

埋め込み JS のダウンロードのブロック
埋め込み JS は、HTML ドキュメント内に直接記述された JS コードを指します。前述したように、外部 JS を参照すると、その後のリソースのダウンロードとその後のコンテンツのレンダリングがブロックされます。次の 2 つのコードを見てください:

コードをコピーします コードは次のとおりです:

<

blogjava> 🎜>

CSDN>

ブログパーク>

ABC>

AAA> ;

<br />


時間帯図:

時間帯図で確認できるのは、代コード 2 内、CSS および画像片にはダウンロードが存在せず、CSS のダウンロードが完了した後、ダウンロードの次の面が実行されることです。 2 つの図では、CSS が後続の JS に挿入されている場合、この CSS が後続のソースのダウンロードを妨げる可能性があります。 CSS がブロックされていますか? 構想は 1 つの空関数であり、この空関数を 1 ミリ秒で解析し、次の面 2 枚の画像が等価である場合に CSS のダウンロードが完了し、1.3 秒後にダウンロードが開始されます。
根本的な原因: ブラウザーは html 内の css と js の順序を保持するため、サンプル形式のテーブルは、挿入された JS で事前にロードされ、解析される必要があります。
に JS を挿入すると、

1、一番下に配置され、すべての場所に配置されます。
2、挿入 JS が先頭に配置されている場合、挿入 JS は CSS 部分に配置されます。
3、defer を使用します
4、挿入された JS には不要です実行時間の長い関数を使用する場合は、必要に応じて setTimeout を使用して

PS:很多网站喜欢頭の中に JS を挿入し、CSS の後ろに表示されている www.qq を解放します。 com、もちろん、yahoo、google

[安全] 转转请注明出处:http://www.blogjava.net/BearRui/ など、多くのウェブサイトが CSS の先頭に JS を配置しています。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。