MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

投機的解析のためのページ最適化

この翻訳は不完全です。英語から この記事を翻訳 してください。

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

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

Making speculative loads succeed

リンクされたスクリプト、スタイルシート、および画像の投機的ロードを成功させるための唯一の方法 : 

  • <base>要素を使用してページの基底URIを上書きする場合は、その要素をドキュメントの非スクリプト部分に配置します。document.write() や document.createElement() を使用して追加しないでください。

Avoiding losing tree builder output

Speculative tree building fails when document.write() changes the tree builder state such that the speculative state after the </script> tag no longer holds when all the content inserted by document.write() has been parsed. However, only unusual uses of document.write() cause trouble. Here are the things to avoid:

  • Don't write unbalanced trees. <script>document.write("<div>");</script> is bad. <script>document.write("<div></div>");</script> is OK.
  • Don't write an unfinished token. <script>document.write("<div></div");</script> is bad.
  • Don't finish your writing with a carriage return. <script>document.write("Hello World!\r");</script> is bad. <script>document.write("Hello World!\n");</script> is OK.
  • Note that writing balanced tags may cause other tags to be inferred in a way that makes the write unbalanced. E.g. <script>document.write("<div></div>");</script> inside the head element will be interpreted as <script>document.write("</head><body><div></div>");</script> which is unbalanced.
  • Don't format part of a table. <table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table> is bad. However, <script>document.write("<table><tr><td>Hello World!</td></tr></table>");</script> is OK.
  • TODO: document.write inside other formatting elements.

ドキュメントのタグと貢献者

 このページの貢献者: hironorikonuma
 最終更新者: hironorikonuma,