DOMContentLoadedとLoadイベント
Scrapeless Scraping Browserは、正確なドキュメントとリソースの準備信号が必要な自動化ワークフローのために管理されたChromiumセッションを提供します。
TL;DR
- DOMContentLoadedは、初期HTMLが解析され、遅延スクリプトが実行されたことを意味します。 すべての画像、スタイルシートの背景アセット、またはサブリソースを待機するわけではありません。
- ウィンドウのロードイベントは、通常のライフサイクルの後半で発火します。 ドキュメントとその熱心にロードされた依存リソースが完了するのを待機します。
- どちらのイベントもアプリケーションが特定のアクションに対して準備ができていることを証明するものではありません。 クライアントレンダリング、非同期データ、アニメーション、およびレイジーローディングは、その後も続行できます。
- 自動化は、最も早い意味のある条件を待機すべきです。 セレクター、アプリケーションの状態、または応答は通常、グローバルページイベントよりも正確です。
- 遅延リスナーはdocument.readyStateを確認する必要があります。 非同期でロードされたスクリプトは、すでにDOMContentLoadedが発火した後に実行される可能性があります。
ライフサイクルスコープの重要性
DOMContentLoadedとロードイベントの選択は、ブラウザが状態をどのように公開し、コンテンツをレンダリングし、自動化されたアクションが安全なタイミングを決定するかに影響します。正確な定義は、チームが狭い信号を普遍的な答えとして扱うのを防ぎます。また、期待されるブラウザの動作が文書化されたライフサイクル、API、またはシステムの境界に結びついているため、テストの失敗を診断しやすくします。
Web自動化において、実際の質問は常に「ページは準備ができていますか？」や「ブラウザは本物に見えますか？」よりも狭いです。次のステップでは、1つのコントロールを有効にする必要がある場合や、1つのフレームのナビゲーションが完了する必要がある場合、1つのコンポーネントが内部ツリーを接続する必要がある場合、または1つのレンダリングサーフェスが一貫性を保つ必要がある場合があります。下のセクションでは、その概念を伝説に頼るのではなく、観測可能なチェックに変換します。
短い答え
DOMContentLoadedは、ブラウザが初期のHTMLドキュメントを解析し、イベントの前にパーシングアルゴリズムが必要とするスクリプトを実行したときに発火します。ウィンドウのロードイベントは、ドキュメントと熱心にロードされた依存リソースの読み込みが完了した後に発火します。典型的なページでは、DOMContentLoadedが最初に到着し、ロードが後で到着します。
その MDN DOMContentLoadedリファレンス は、イベントが画像の読み込みを待たず、遅延スクリプトを待つことを説明しています。それにより、DOMツリーを必要とするが、すべての視覚アセットに依存しないコードにとって役立つ信号となります。スタイルシートは、スクリプトがそれらを待つときに間接的にタイミングに影響を与えることがあります。
違いはライフサイクルのスコープについてであり、ページの品質ではありません。解析されたDOMはプレースホルダーを含む可能性があります。ロードされたページは、ソケットを開いたり、さらにデータを取得したり、レイジーコンポーネントをレンダリングしたりすることができます。正しいイベントは、次の操作が何を必要とするかに依存します。
DOMContentLoadedの前に何が起こるか
HTMLパーサーはマークアップを読み取り、DOMを構築します。deferやasyncのない古典的なスクリプトは、取得されて実行される間にパーシングを一時停止できる場合があります。遅延スクリプトは、パーシングをブロックせずに取得され、パーシングの後、DOMContentLoadedの前に実行されます。モジュールスクリプトは関連する遅延動作に従います。非同期スクリプトは利用可能であるときに実行され、同じ順序保証を確立しません。
DOMContentLoadedがディスパッチされると、document.readyStateはインタラクティブに移動します。初期のマークアップからの要素はクエリのために利用可能であり、パーシングライフサイクルによって必要とされる遅延作業が実行されています。コードはイベントハンドラを添付したり、コンポーネントを初期化したり、ドキュメントを検査したりすることができ、大きな画像を待つ必要はありません。
動的に読み込まれたスクリプトは、イベントの後に実行される場合があります。堅牢な初期化コードはdocument.readyStateを確認します：ドキュメントがまだ読み込まれている場合は、DOMContentLoadedリスナーを登録します。そうでない場合は即座に実行します。これにより、すでに発生したイベントにリスナーを添付することで発生する静かな失敗を防ぎます。
ロードイベントが追加するもの
その MDNウィンドウロードリファレンス は、ロードを、スタイルシート、スクリプト、画像、および熱心なロードに参加する埋め込まれたフレームなどの依存リソースを含む全体のページが読み込まれた時点として定義しています。このイベントは、ドキュメントライフサイクルに対してウィンドウで発火します。
ロードは、コードが本当に内在する画像の寸法、完了したiframeの読み込み、または熱心なリソースを含む視覚キャプチャに依存する場合に便利です。それは、フォームやナビゲーションコントロールのみを必要とするインタラクションには過度に保守的です。すべてのアセットを待機することは、信頼性を向上させることなく遅延を追加する可能性があります。
レイジーローディングは、全体のページというフレーズを複雑にします。レイジーローディング用にマークされた画像やiframeは、初期のロードイベントの前に取得されない可能性があります。アプリケーションは、タイマー、ユーザーのインタラクション、オブザーバー、またはコンポーネントの効果から、後でネットワークリクエストを開始することもできます。ロードは定義されたライフサイクルフェーズを閉じます；アプリケーションが永久に終了したと宣言するわけではありません。
自動化のためのタイミング比較
DOMContentLoadedを選択することで、重いイメージ、分析、または長期間のリソース活動を持つページでの待機時間を短縮できます。イベントの後、自動化はターゲット要素またはアプリケーションの条件を待つことができます。ロードを選択すると、熱心な視覚資産を必要とするワークフローが簡素化される可能性がありますが、それでも非同期のアプリケーションデータを見逃し、タスクに関連しないリソースを待つことがあります。
最良の自動化待機は、次のステップが安全であることを証明する最も早い信号です。検索ボックスをクリックするには、そのボックスが表示されて有効であるのを待機します。結果リストを抽出するには、リストコンテナと完了したアプリケーションの状態を待機します。画像ギャラリーをキャプチャするには、関連する画像が完成を報告し、非ゼロの内在寸法を持つのを待機します。
グローバルイベントは普遍的な準備チェックではなく、有用なナビゲーションのマイルストーンです。適切なナビゲーションイベントを目標とした主張と組み合わせます。これにより、失敗が診断可能になります：欠落しているセレクターは期待されるUIが表示されなかったことを示し、一般的なナビゲーションタイムアウトは単に1つの広範な条件が満たされなかったことを示します。
SPA、ハイドレーション、およびデータ取得
シングルページアプリケーションは小さなHTMLシェルを受け取り、DOMContentLoadedに達し、初めてルートデータを取得してコンポーネントをハイドレートします。ロードイベントは、重要な取得がライフサイクルリソースセットが確立された後にJavaScriptから始まる場合、アプリケーションの最終コンテンツが表示される前に発火することもあります。
ハイドレーションは、サーバーでレンダリングされたマークアップにイベントリスナーと状態を追加します。要素は、正しく対話に応じる前に存在することがあります。テストは、アプリケーションが視覚的に待機マーカー、エンabledされたコントロール、またはハイドレーションが完了した状態を表す安定した状態を待機すべきです。存在だけでは不十分な場合があります。
ストリーミングとインクリメンタルレンダリングにより、最終ページの概念はさらに役に立たなくなります。コンテンツはチャンクで到着し、ユーザーが視認できる領域は異なるタイミングで使用可能になります。各操作を状態遷移として扱います：ナビゲーションはドキュメントを作成し、コンポーネントはインタラクティブになり、リクエストはデータを埋め込み、コントロールはアクショナブルになります。
HTML標準が準備をフレームする方法
その HTMLドキュメントの準備アルゴリズム は、読み込み、対話、および完了状態を定義し、準備イベントがキューに追加されるタイミングを指定します。DOMContentLoadedは解析作業の後の対話的フェーズに関連し、ロードはドキュメントの完了処理の後に続きます。
readyStateを理解することは、イベント順序の質問をデバッグするのに役立ちます。読み込みは解析が進行中であることを意味します。対話的は、解析が完了したが、サブリソースがまだ読み込まれている可能性があることを意味します。完了は、ドキュメントと関連するサブリソースが読み込みライフサイクルを完了したことを意味します。これらの状態は観察可能なスナップショットであり、コードは自分のアプリケーションの前提条件をテストする必要があります。
パフォーマンス測定のために、ブラウザのナビゲーションタイミングは、別々のDOMContentLoadedとロードのタイムスタンプを公開します。そのギャップはリソースのコストを明らかにできますが、どちらのメトリックも単独でユーザーがタスクを完了できるタイミングを記述することはありません。ライフサイクルメトリックを、主要コンテンツまたはインタラクティブコントロールが利用可能になったときなど、タスク指向の測定値と組み合わせます。
次の準備信号を選択する
タスクが進行できることを証明する最小の条件または設定から始めます。標準に準拠したブラウザの動作を維持し、その後ワークフローが必要とする場合にのみプロファイルコントロールを追加します。ブラウザのビルドと関連する状態を記録し、後での違いを説明できるようにします。繰り返し可能な観察は、ページ、フレーム、表示、またはフィンガープリンとが単に「完了」または「安全」であるという広範な主張よりも有用です。
- 次のアクションを定義する。 待機または構成ステップの後、スクリプトまたはユーザーが何をすべきかを正確に記述します。
- 観察可能な信号を選択します。 そのアクションを直接サポートするブラウザのプロパティ、ライフサイクルステート、要素条件、またはレンダリング結果を優先します。
- 関連する値を整合性のあるものに保つ。 ブラウザ、オペレーティングシステム、画面、ロケール、グラフィックス、およびセッション設定は、1つのもっともらしい環境を説明する必要があります。
- 正常なアプリケーション動作を検証する。 プライバシーまたは自動化の介入は、変更したAPIまたはコンポーネントを静かに壊すべきではありません。
- 診断証拠をキャプチャする。 チェックに失敗した場合は、関連URL、状態、コンソールメッセージ、および構成名を保存します。
結論
DOMContentLoadedは解析された、スクリプトで準備されたドキュメントを示し、ロードは初期のイーガーリソースライフサイクルの完了を示します。DOMContentLoadedは通常、より良い早期ナビゲーションのマイルストーンであり、ロードは次のステップがイーガーアセットに依存している場合に有用です。信頼性のある自動化は、その後、特定の要素、データ条件、またはアプリケーション状態を待機し、いずれのグローバルイベントも完全な準備の証明として扱わないようにします。
その Scrapeless Scraping Browserのドキュメント は、管理されたブラウザセッションがどのように構成されるかを説明し、 Scraping Browser製品概要 はブラウザ自動化の範囲を記述します。これらのリソースは、許可されたワークフローでコンセプトを適用するための製品コンテキストを提供します。
より正確なページ待機を使用する準備はできていますか？
ブラウザレンダリング、セッション設定、および自動化インフラストラクチャを管理されたChromium環境に移動します。
今日登録して、 $5の無料クレジット — クレジットカード不要.
あなたの$5クレジットを請求する →FAQ
どちらが先に発火しますか、DOMContentLoadedそれともロード？
DOMContentLoadedは通常、すべてのイーガー画像と依存リソースを待機しないため、最初に発火します。
DOMContentLoadedは遅延スクリプトを待機しますか？
はい。遅延スクリプトとモジュールスクリプトは、解析の後、DOMContentLoadedの前に実行されます。これはドキュメントのスクリプト処理ルールに従います。
ロードは遅延読み込みされた画像を待機しますか？
必ずしもそうではありません。ネイティブの遅延読み込みによって遅延されたリソースは、最初のウィンドウロードイベントの後に読み込まれる場合があります。
ブラウザの自動化はどのイベントを使用すべきですか？
ページに互換性のある最も早いライフサイクルイベントを使用し、次のアクションに必要な特定の要素またはアプリケーション状態を待ちます。