ブラウザが JavaScript スクリプトの読み込みとコード実行を実行する順序の分析

この記事は主に、HTML ページに JavaScript を導入するいくつかの方法に基づいており、HTML での JavaScript スクリプトの実行順序を分析しています

1. JavaScript スクリプト実行のブロックの性質について

JavaScript には、ブラウザーで解析および実行されるときにブロック特性があります。つまり、JavaScript コードが実行されると、他のリソースの解析、レンダリング、ダウンロードが停止され、スクリプトが完了するまで待機する必要があります。これには議論の余地はなく、この動作はすべてのブラウザで一貫しています。その理由を理解するのは難しくありません。ブラウザには安定した DOM 構造が必要であり、JavaScript は DOM を変更する (DOM 構造を変更するか、特定の DOM ノードを変更する) 可能性があります。 JavaScript の実行中にページの解析が継続すると、解析プロセス全体の制御が困難になり、解析エラーが発生する可能性も非常に高くなります。

ただし、ここには注意が必要な別の問題があります。初期のブラウザでは、JavaScript ファイルのダウンロードによって、ページの解析がブロックされるだけでなく、他のリソースもブロックされます。ページ上のダウンロード (他の JavaScript スクリプトファイル、外部 CSS ファイル、画像などの外部リソースを含む)。 IE8、Firefox3.5、Safari4、Chrome2 以降では、JavaScript の並行ダウンロードが許可されるようになり、同時に JavaScript ファイルのダウンロードは他のリソースのダウンロードをブロックしません (古いバージョンでは、JavaScript ファイルのダウンロードもブロックされます)。他のリソースのダウンロード）。

注: 同じドメイン名での最大接続数については、ブラウザごとに異なる制限があります。HTTP1.1 プロトコル仕様の要件では、2 を超えることはできませんが、現在、ほとんどのブラウザでは最大接続数が提供されています。 2 より多く、IE6/7 は両方とも 2、IE8 は 6 にアップグレードされ、Firefox と chrome も 6 になります。もちろん、この設定も変更できます。詳細については、http:// を参照してください。 www.stevesouders.com/blog/2008/03/20/roundup-on-Parallel-connections/

2. スクリプトの実行順序について

ブラウザはページを上から下の順に解析するため、通常の状況では、JavaScript スクリプトの実行順序も上から下になります。つまり、ページで最初に表示されるコード、または最初に導入されるコードがJavaScript ファイルの並列ダウンロードが許可されている場合でも、常に最初に実行されます。ここで「通常の状況下では」と赤でマークしていることに注意してください。その理由は何ですか? JavaScript コードを HTML に追加するには多くの方法があることがわかっており、それらは次のように要約されます (requirejs や seajs などのモジュールローダーに関係なく):

(1) 通常の導入:
を介してページにスクリプトコードを導入するか、外部スクリプトを導入します。

(2) document.write メソッドを通じて

著者別の最新記事