DOM実行フローのJSタイムライン、遅延と非同期

DOM実行フローのJSタイムライン

1. Documentオブジェクトを作成し、Webページの解析を開始します。HTML要素とテキストを解析します。このステージのdocument.readyState = 'loading'

2. 外部CSSにリンクし、ロードするスレッドを作成して、ドキュメントの解析を続行します。

3. スクリプト外部JSに遭遇し、非同期、遅延、ブラウザーのロード、ブロック、ロードの待機を設定せず、ドキュメントを解析しませんでした

4. スクリプトが外部JSに遭遇し、非同期に設定して延期すると、ブラウザーはスレッドを作成してロードし、ドキュメントの解析を続行します

   • ロード後に非同期が実行されます

   • 遅延htmlが解析された後、導入シーケンスが順次実行されます。

   • スクリプトでのdocument.write Psの使用を禁止します：彼はドキュメントストリームをクリアします

5. imgなどに遭遇すると、dom構造の通常の詳細が最初に表示され、次にブラウザーがsrcを非同期でロードして、ドキュメントの解析を続行します。

6. ドキュメントが解析されると、document.readyState = 'interactive'

7. ドキュメントが解析された後、据え置きのあるすべてのスクリプトが導入順に実行されます。

8. ドキュメントオブジェクトはDOMContentLoadedイベントをトリガーします。これにより、同期スクリプト実行ステージからイベント駆動型ステージへのプログラム実行もマークされます。つまり、クリックなどのイベントは現在受け入れられています。

9. すべての非同期スクリプトが読み込まれて実行され、imgなどが読み込まれると、document.readyState = completeは読み込みイベントをトリガーします。

10. それ以降、ユーザー入力、ネットワークイベントなどは非同期応答で処理されます。