DOMContentLoaded と load イベント: ページの準備完了を解説

DOMContentLoaded と Load イベント

Scrapeless Agent Browser は、動的なページをナビゲートし、互換クライアントを通じてレンダリング済みコンテンツを検査するためのブラウザセッションを提供します。

要約

  • DOMContentLoaded はドキュメントのパースのマイルストーンを示します。 これは、その後のアプリケーションデータが到着していることを保証しません。
  • window の load イベントは、ドキュメントに対する load 遅延リソースの後に発生します。 それでも、将来のあらゆる UI 状態が完成していることを意味するわけではありません。
  • ナビゲーションのマイルストーンとデータ準備完了は別の条件です。 抽出タスクに必要な状態まで待機します。
  • 静かなネットワークは別の観測です。 バックグラウンドトラフィックや将来のアクションが、それを汎用的な準備完了の定義とすることを妨げます。

ドキュメントのマイルストーンとタスク完了を区別する

DOMContentLoaded と window の load イベントは、ドキュメントのライフサイクルの異なる時点を表します。これらは有用なナビゲーションマイルストーンですが、どちらもスクレイパーに必要な作業をアプリケーションが完了したことを示す普遍的なシグナルではありません。

この HTML パースおよびライフサイクルモデル は、ドキュメント処理とスクリプト実行がどのようにライフサイクルイベントにつながるかを定義します。DOMContentLoaded はパースと関連する defer スクリプトの実行に続いて発生します。window の load イベントは、load を遅延させるリソースが完了した後、ドキュメント読み込みシーケンスのより後の段階で発生します。

アプリケーションは、どちらのマイルストーンの後でもデータを要求できます。ユーザー操作が、はるか後になって別のリクエストをトリガーすることもあります。ページは、エラーやチャレンジを表示したままライフサイクルイベントに到達することもあります。イベントをドキュメント処理に関する証拠として解釈し、そのうえでタスクの対象コンテンツを別途確認してください。

イベントを一目で比較する

選択するイベントは、観察する必要のある作業に合わせる必要があります。ページタイトルの読み取りと、商品グリッドのデータ埋め込みでは、必要とされる完了条件が異なり得ます。

質問DOMContentLoadedWindow Load イベント
それはどのマイルストーンを表しますか?パースと関連する defer スクリプトの完了その後のドキュメント読み込みの完了
すべての画像を待機しますか?いいえlazy load などの除外を伴いつつ、load を遅延させるリソースを待機する
アプリケーションデータを保証しますか?いいえいいえ
その後にページが変化する可能性はありますか?はいはい
適切な抽出ルールタスク固有の条件を追加するタスク固有の条件を追加する

この比較は、各リソース要素固有の load イベントではなく、ドキュメントの window load イベントに関するものです。画像、スクリプト、フレームは、それぞれ固有のイベントターゲットとタイミングを持ち得ます。待機をデバッグする際には、クライアントがどのイベントを観測しているのかを特定してください。

スクリプト読み込みがタイミングに与える影響を理解する

スクリプトの挙動はドキュメントのマイルストーンに影響するため、「画像の前か後か」という単純な説明では不十分です。パースをブロックするスクリプト、defer されたスクリプト、モジュール、非同期スクリプトは、それぞれパースおよびイベントタイミングとの関係が異なります。

パース中に実行されるスクリプトは、パーサーを遅延させる可能性があります。defer スクリプトの実行は、DOMContentLoaded の前のシーケンスに参加します。非同期処理は独立して完了し得て、アプリケーションは初期スクリプトのロードモードに関係なく、後続の更新をスケジュールできます。

スタイルシートも、スクリプト実行がそれらを待機しなければならない場合には、間接的にスクリプトタイミングに影響し得ます。「DOMContentLoaded はすべてのスタイルシートを待つ」という一括した言明は避けてください。依存関係が重要であり、ページ固有のロード設計が観測されるシーケンスを決定します。

診断のためには、必要なコンテンツがマイルストーンと比較していつ観測可能になるかを記録します。データを含む要素が DOMContentLoaded の後に現れる場合、そのイベント単独では不十分であることが分かります。load の後でも要素が存在しない場合は、アプリケーション処理の遅延、不適切なページ状態、あるいは本当に存在しないことを示している可能性があります。待機条件を変える前にドキュメントを調査してください。

必要なレコードに対して「準備完了」が何を意味するか定義する

データ準備完了は、有効なレコードを生成するために必要な状態を表すべきです。その状態は、都合のよいグローバルイベントではなく、フィールド契約から定義してください。

商品詳細タスクにおいては、準備完了状態は、対象の商品識別子と確定した価格フィールドを要求するかもしれません。記事タスクでは、見出しと記事本文領域を要求する場合があります。検索リストでは、結果コンテナまたは明示的な「結果なし」メッセージを要求するかもしれません。

コンテナが存在するという事実だけでは条件として弱すぎる場合があります。多くのアプリケーションは、コンテナを中身を埋める前に作成します。また、同じページ上にローディング用プレースホルダーや以前の選択内容がある場合、見えているタイトルだけでは条件として弱すぎる可能性もあります。これらの状態を区別できる観測可能な条件を選びましょう。

条件を限定して維持してください。要求された状態がタスクで許容された待機期間内に現れない場合は、失敗の証拠を保持し、その結果を不完全として分類します。待機タイムアウトを自動的に空のデータセットへ変換しないでください。明示的な空の状態と、観測されなかった結果とは意味が異なります。

既存のドキュメントと新しいナビゲーションを分けて扱う

ライフサイクルイベントはドキュメントインスタンスに属します。クライアントがイベント発火後に監視を開始した場合、新しいリスナーを追加しても過去のイベントは再生されません。既存のページには、オートメーションクライアントで文書化されているナビゲーションと読み込み状態の挙動を使用してください。

The DOM イベントディスパッチモデル イベントの発生と、その後のドキュメント検査が、なぜ異なる観測であるかを説明します。どのナビゲーションによってドキュメントが作成されたのか、そしてクライアントがそのナビゲーションを待機していたのか、あるいはすでに開いているページを検査していたのかを記録します。

シングルページアプリケーションのトランジションでは、新しいナビゲーション時のような完全なドキュメント読み込みシーケンスを発生させることなく、表示コンテンツが変化する場合があります。ルート変更、フィルターの選択、モーダルでの操作などでは、別のウィンドウの読み込みイベントではなく、アプリケーション固有の完了チェックが必要になることがあります。

クリックによって新しいタブが開かれた場合、元のタブのライフサイクルは新しいページについてほとんど何も伝えません。遷移先ページを特定し、その状態を確認してください。アクションと観察が、同じ意図されたコンテキストに結び付けられたままになるように保ちましょう。

ネットワークアイドルを別個のヒューリスティックとして扱う

ネットワークアイドルは、HTML のライフサイクルイベントではなく、ネットワークアクティビティに関するクライアント定義の観測です。その有用性は、ページと自動化ライブラリ側の定義に依存します。

分析、投票、またはストリーミングを行うページは、必要なデータの準備が整った後もアクティブな状態を維持することがあります。別のページは、後のタイマーや操作によってフィールドが埋められる前に静かな状態になることがあります。したがって、ネットワークの静寂をデータ契約の代わりとしてはなりません。

どのリクエストが出力に影響するかを確認します。特定のアプリケーションリクエストが対象領域を埋める場合、ページ上のすべてのリクエストを見るよりも、「受け入れられたコンテンツ状態」の方が通常はより明確な境界となります。ネットワーク診断は、すべての抽出に対して無関係なバックグラウンド活動を条件にしないようにしながら、利用できる状態を維持してください。

固定スリープにも同様の制限があります。これはフィールドの正しさではなく、経過時間を測定します。タスクに正当なタイミング要件がある場合にのみ使用し、その結果得られた内容を必ず検証してください。たまたま一度うまくいった遅延を、一般的な準備完了の証拠として説明してはいけません。

誤った文書をすぐに受け入れることを避ける

高速のマイルストーンは、誤ったページをあたかもナビゲーションが成功したかのように見せてしまうことがあります。フィールド抽出を適用する前に、最終的なURLとドキュメントの同一性を確認してください。

The HTTP ステータスとレスポンスのセマンティクス レスポンスのやり取りは通信の交換を記述し、ブラウザーのライフサイクルは結果として得られるドキュメントの処理を記述します。成功した HTTP レスポンスにはフォールバックページが含まれる場合があり、読み込まれたドキュメントにはアクセスチャレンジが含まれる場合があります。どちらのシグナルも、要求された記事や商品が取得されたことを証明するものではありません。

要求された URL、最終的な URL、タイトル、関連する見出し、および必要な地域を記録してください。ページに明示的なエラー状態が含まれている場合、通常のデータ受け入れから除外してください。必要な記録が存在しない場合、そのページが空の結果を表しているのか、不完全なアプリケーション状態を表しているのかを確認してください。

オプションのアセットには、それぞれ固有の受け入れ基準が必要です。テキスト抽出では、すべての画像を必要としない場合がありますが、ビジュアルキャプチャではフォント、画像の読み込み、および望ましいレイアウトに依存する可能性があります。待機戦略は、汎用的なイベントの優先順位ではなく、成果物に従うべきです。

代表的なページで待機戦略を比較する

有用な待機評価では、単にナビゲーションが完了したタイミングではなく、タスクが有効になるタイミングを測定する。代表的なページタイプを使用し、タイミングの観察とともにコンテンツチェックを保持すること。

静的なドキュメント、クライアントによって入力されたレコード、明示的な空の状態、そして継続的なバックグラウンドアクティビティがあるページを比較します。どのマイルストーンが発生したか、そして必須フィールドが実際に準備できていたかを記録します。素早いが不完全なレコードを生み出す戦略は、より速い成功した抽出として扱うべきではありません。

インターフェイスが変更される場合、必要な領域とその識別情報を示す診断用キャプチャを保持してください。後になってセレクターが失敗した際、この証拠は、構造の変化とタイミングの問題を区別するのに役立ちます。レイアウトが変わってしまった場合、どれだけ待機時間を伸ばしても、その別のレイアウト向けのセレクターを修復することはできません。

エージェントブラウザーをコンテンツ受け入れ条件付きで使用する

Scrapeless エージェント ブラウザー 動的なページを観察するための実行環境を提供します。 エージェント ブラウザー セッション モデル クライアント固有の待機やレコード固有の受け入れ条件の必要性を取り除くものではない。

The エージェント主導のブラウザナビゲーションワークフロー 制御されたページ操作のための関連コンテキストを提供します。現在のクライアントの指示に従って実装を行い、要求されるページ状態を明示的に保ってください。このページは、普遍的なサービス待機設定を主張することなく、イベントのセマンティクスを比較します。

レビュー スクレイプレスの料金 有効な出力を生成するセッション作業に対して。無関係なリソースを不必要に待つことは時間を消費する一方で、レコードを早すぎる段階で受け入れると、その後の工程でデータエラーを引き起こします。実際のタスクにおいて、両方の結果を評価してください。

結論:必要な証拠がそろうまで待つ

DOMContentLoaded または load をドキュメントのマイルストーンとして使用し、そのうえで要求されたコンテンツに結びついた条件を追加してください。ページの同一性を確認し、明示的な空結果と不完全なレンダリングを区別し、成果物に応じてビジュアルチェックかデータチェックかを選択します。適切な待機は、タスクの証拠が十分になった時点で終了します。

ブラウザータスクのページ準備完了を定義する

認可されたソースを操作し、要求されたコンテンツ状態が確認できる場合にのみキャプチャを受け入れてください。

今すぐ登録して、取得しましょう 無料クレジット5ドル — クレジットカードは不要です.

$5のクレジットを受け取る →

FAQ

Q: DOMContentLoaded は、すべてのスクリプトの実行完了を意味しますか?

DOMContentLoaded は、考えうるすべてのスクリプトや非同期タスクが完了したことを意味しません。そのタイミングは、パースと関連する遅延実行に結びついています。後続のアプリケーション処理によってもドキュメントは変更されうるため、後から埋め込まれるフィールドには、それに対応したコンテンツ条件を使ってください。

Q: load はすべての画像を待機しますか?

window の load イベントは、ドキュメントの読み込みを遅延させるリソースを待機しますが、遅延読み込み(lazy-load)の画像などの除外対象が影響します。後続のユーザー操作によって要求されるすべての画像が表示されたことを保証するものではありません。ビジュアルキャプチャには、専用のアセットおよびレイアウト条件が必要です。

Q: スクレイピングは常に load を待つべきですか?

スクレイピングは、常に load を完全な受け入れ条件として使うべきではありません。あるデータはもっと早く準備され、別のアプリケーションデータはさらに後で到着します。遷移に適したマイルストーンを選び、必要なページ状態は別途検証してください。

Q: network idle は selector の待機より常に信頼できますか?

network idle は、タスク固有のコンテンツ条件より普遍的に信頼できるわけではありません。有用なデータが用意された後もバックグラウンドリクエストが続く場合があり、無通信状態の後で新たな処理が始まることもあります。必要なレコードを直接特定できる可観測な条件を優先してください。

Q: フィルター変更で新しい DOMContentLoaded イベントが発火しないのはなぜですか?

フィルターの変更は、新たな完全ドキュメントナビゲーションなしに既存ドキュメントを更新する場合があります。DOMContentLoaded はドキュメント処理に属するものであり、すべての UI 更新で発生するわけではありません。代わりに、フィルターが確定した状態と、その結果得られるレコードを監視してください。

References