Speculative parsing (投機的解析)

伝統的なブラウザーの HTML パーサーはメインスレッドで動作し、 </script> タグの後はスクリプトがネットワークから取得されて実行が完了するまでブロックされます。一部の HTML パーサー、たとえば Firefox 4 以降では、メインスレッドから分離された投機的解析に対応しています。これは、スクリプトがダウンロードされて実行されている間、先に解析を進めます。 HTML パーサーは、ストリーム内で先に見つかるスクリプト、スタイルシート、画像の投機的な読み込みを開始し、 HTML ツリー構築アルゴリズムを投機的に実行します。この利点は、投機が成功したときに、スクリプト、スタイルシート、画像のスキャンが完了した受信ファイルの一部を再解析する必要がないことです。欠点は、投機が失敗した場合により多くの作業が失われることです。

このドキュメントは、投機が失敗してページの読み込みが遅くなるようなことを避けるのに役立ちます。

リンクされたスクリプト、スタイルシート、画像の投機的な読み込みを成功させるためには、 document.write を避けてください。ページのベース URI を上書きするために <base>要素を使用する場合は、その要素を文書のスクリプト外においてください。これを document.write()document.createElement で追加しないでください。

ツリービルダーの出力の喪失の防止

投機的なツリー構築に失敗するのは、 document.write() によって挿入された内容がすべて解析されたときに、 </script> タグの後の投機的な状態を破棄しなければならなくなる形で、 document.write() によってツリービルダーの状態が変更されたときです。しかし、問題を起こすのは document.write() の異常な使い方だけです。避けるべきことは以下のようなものです。

  • バランスの取れないツリーを出力しないでください。 <script>document.write("<div>");</script> は悪い例です。 <script>document.write("<div></div>");</script> は良い例です。
  • 不完全なトークンを出力しないでください。 <script>document.write("<div></div");</script> は悪い例です。
  • 出力をキャリッジリターン文字で終わらせないでください。 <script>document.write("Hello World!\r");</script> は悪い例です。 <script>document.write("Hello World!\n");</script> は良い例です。
  • バランスの取れたタグを書いても、他のタグが推測され、バランスの悪い書き込みになってしまうことがあるので注意してください。例えば <script>document.write("<div></div>");</script>head 要素の中で実行すると、 <script>document.write("</head><body><div></div>");</script> となりバランスが取れなくなります。
  • 表の一部を書き込まないでください。 <table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table> は悪い例です。
タグの後はスクリプトがネットワークから取得されて実行が完了するまでブロックされます。一部の HTML パーサー、たとえば Firefox 4 以降では、メインスレッドから分離された投機的解析に対応しています。これは、スクリプトがダウンロードされて実行されている間、先に解析を進めます。 HTML パーサーは、ストリーム内で先に見つかるスクリプト、スタイルシート、画像の投機的な読み込みを開始し、 HTML ツリー構築アルゴリズムを投機的に実行します。この利点は、投機が成功したときに、スクリプト、スタイルシート、画像のスキャンが完了した受信ファイルの一部を再解析する必要がないことです。欠点は、投機が失敗した場合により多くの作業が失われることです。","popularity":0,"modified":"2021-07-28T00:49:01.000Z","other_translations":[{"title":"Speculative parsing","locale":"en-US","native":"English (US)"},{"title":"Optimizar sus páginas para análisis especulativo","locale":"es","native":"Español"},{"title":"Optimisation des pages pour l'analyse spéculative","locale":"fr","native":"Français"},{"title":"Optimizing your pages for speculative parsing","locale":"pt-BR","native":"Português (do Brasil)"},{"title":"Оптимизация ваших страниц для рискованного парсинга","locale":"ru","native":"Русский"},{"title":"对页面预解析进行优化","locale":"zh-CN","native":"中文 (简体)"}],"source":{"folder":"ja/glossary/speculative_parsing","github_url":"https://github.com/mdn/translated-content/blob/main/files/ja/glossary/speculative_parsing/index.html","last_commit_url":"https://github.com/mdn/translated-content/commit/f2c560577fe17103e74314e60d20472a757100c3","filename":"index.html"},"parents":[{"uri":"/ja/docs/Glossary","title":"MDN Web Docs 用語集: ウェブ関連用語の定義"},{"uri":"/ja/docs/Glossary/speculative_parsing","title":"Speculative parsing (投機的解析)"}],"pageTitle":"Speculative parsing (投機的解析) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN","noIndexing":false}}