Optimizing your pages for speculative parsing

  • Revision slug: HTML/Optimizing_Your_Pages_for_Speculative_Parsing
  • Revision title: Optimizing your pages for speculative parsing
  • Revision id: 40019
  • Created:
  • Creator: Hsivonen
  • Is current revision? No
  • Comment First draft; 248 words added, 12 words removed

Revision Content

This document is a WIP.

Traditionally in browsers the HTML parser has run on the main thread and has blocked after a </script> tag until the script has been retrieved from the network and executed. The new HTML5 parser in Firefox x.y supports speculative parsing off the main thread (not landed as of 2009-10-09). It parses ahead while scripts are being downloaded and executed. As in Firefox 3.5, the HTML parser starts speculative loads for scripts, style sheets and images it finds ahead in the stream. However, in Firefox x.y the new HTML5 parser also runs the HTML5 tree construction algorithm speculatively. The upside is that when a speculation succeeds, there's no need to reparse the part of the incoming file that was already scanned for scripts, style sheets and images. The downside is that there's more work lost when the speculation fails.

This document helps you avoid the kind of things that make speculation fail and slow down the loading of your page.

Making Speculative Loads Succeed

There’s only one rule for making speculative loads of linked scripts, style sheets and images succeed:

  • Do not use the <base> element to override the base URI of your page.

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.

  • TODO: document.write inside formatting elements.

 

Revision Source

<p><a class=" link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=521391" title="https://bugzilla.mozilla.org/show_bug.cgi?id=521391">This document is a WIP</a>.</p>
<p>Traditionally in browsers the HTML parser has run on the main thread and has blocked after a <code>&lt;/script&gt;</code> tag until the script has been retrieved from the network and executed. The new HTML5 parser in Firefox x.y supports speculative parsing off the main thread (<strong>not landed as of 2009-10-09</strong>). It parses ahead while scripts are being downloaded and executed. As in Firefox 3.5, the HTML parser starts speculative loads for scripts, style sheets and images it finds ahead in the stream. However, in Firefox x.y the new HTML5 parser also runs the HTML5 tree construction algorithm speculatively. The upside is that when a speculation succeeds, there's no need to reparse the part of the incoming file that was already scanned for scripts, style sheets and images. The downside is that there's more work lost when the speculation fails.</p>
<p>This document helps you avoid the kind of things that make speculation fail and slow down the loading of your page.</p>
<h2>Making Speculative Loads Succeed</h2>
<p>There’s only one rule for making speculative loads of linked scripts, style sheets and images succeed:</p>
<ul> <li>Do not use the <code>&lt;base&gt;</code> element to override the base URI of your page.</li>
</ul>
<h2>Avoiding Losing Tree Builder Output</h2>
<p>Speculative tree building fails when <code>document.write()</code> changes the tree builder state such that the speculative state after the <code>&lt;/script&gt;</code> tag no longer holds when all the content inserted by <code>document.write()</code> has been parsed. However, only unusual uses of <code>document.write()</code> cause trouble. Here are the things to avoid:</p>
<ul> <li>Don't write unbalanced trees. <code>&lt;script&gt;document.write("&lt;div&gt;");&lt;/script&gt;</code> is bad. <code>&lt;script&gt;document.write("&lt;div&gt;&lt;/div&gt;");&lt;/script&gt;</code> is OK.</li> <li>Don't write an unfinished token. <code>&lt;script&gt;document.write("&lt;div&gt;&lt;/div");&lt;/script&gt;</code> is bad.</li> <li> <p>Don't finish your writing with a carriage return. <code>&lt;script&gt;document.write("Hello World!\r");&lt;/script&gt;</code> is bad. <code>&lt;script&gt;document.write("Hello World!\n");&lt;/script&gt;</code> is OK.</p> </li> <li> <p>TODO: document.write inside formatting elements.</p> </li>
</ul>
<p> </p>
Revert to this revision