JavaScript がブラウザに読み込まれる仕組み

ブラウザで JavaScript をロードする方法: 1. Web ページを解析します。 2. リンクを通じて外部 CSS を導入します。 4. 非同期ロード用のスレッドを作成します。ドキュメントを解析します。 6. 遅延スクリプトを順番に実行します。 7. イベント駆動型ステージに変換します。

この記事の動作環境: Windows 7 システム、Dell G3 コンピューター、JavaScript バージョン 1.8.5。

今日は JavaScript の読み込みプロセスを共有します。これは参考になると思います。

JavaScript の読み込みは、開始された瞬間からブラウザーに到達するまで始まります。すべてが順番に完了するまで、大まかな手順はドキュメント オブジェクトの作成 ==> ドキュメントの解析完了 ==> ドキュメントの読み込みと実行に分けられます。詳しくは記事で紹介します。

読み込みプロセス

(1) Web ページの解析とは、HTML 要素とそのテキスト コンテンツを解析し、オブジェクトとテキストをドキュメントに追加し、ドキュメントを読み込むことを意味します。

ドキュメント分析

(2) リンク経由で外部CSSを導入し、スレッドを作成し、非同期で読み込みます。

(3) スクリプトを介して外部 js を導入します。async と defer は設定されていません。ブラウザは同期的に読み込まれ、ブロックされます。

(4) js が読み込まれるのを待ってから、async を設定します。 defer for it を実行すると、ブラウザーは非同期読み込み用のスレッドを作成します。このスレッドでは、スクリプトが読み込まれた直後に非同期が実行されます (注: 非同期読み込みでは document.write() の使用を禁止する必要があります)

(5 ) img などの src を持つ属性に遭遇した場合、最初に dom 構造が通常どおり解析される必要があり、その後ブラウザは src を非同期でロードしてドキュメントの解析を続行します。タグが見つかった場合は、待たずに dom ツリーが直接生成されます。 img が scr をロードするようにします。

(6) ドキュメントの解析が完了すると、defer で設定されたすべてのスクリプトが順番に実行されます。 (async との違いに注意してください。ただし、 document.write() の使用も禁止されています);

(7) document オブジェクトは DOMContentLoaded イベントをトリガーします。これは、同期スクリプトからのプログラム実行の変換もマークします。実行ステージからイベント駆動ステージへ。

(8) すべての非同期スクリプトが読み込まれて実行され、img などが読み込まれると (すべてのページが読み込まれた後)、document.readyState = 'complete' となり、window オブジェクトがloadイベントをトリガーします。

(9) 今後、ユーザー入力やネットワークイベントなどは非同期応答方式で処理されます。

注

プログラムを書くときは以下に script タグを書きますが、上に書くと div を操作できるだけでなく、dom を解析した直後に処理できるので効率的ですが、 に書くのがベストです。 Bottom

<div style="width:100px;height:100px;background: pink;">
<script>
var div=document.getElementsByTagName("div")[0]
div.onclick=function(){
this.style.background="hotpink";
}
</script>

要約: 以上がこの記事の全内容です。この記事を通じて、皆さんが JavaScript の読み込みについて一定の理解を深めていただければ幸いです。

以上がJavaScript がブラウザに読み込まれる仕組みの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。