blob: 3a6c4495ffd9b31eccb60c779782b9a0f0c83766 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
---
title: Optimizing your pages for speculative parsing
slug: Glossary/speculative_parsing
translation_of: Glossary/speculative_parsing
original_slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing
---
<p>Traditionally in browsers the HTML parser has run on the main thread and has blocked after a <code></script></code> tag until the script has been retrieved from the network and executed. The HTML parser in Firefox 4 and later supports speculative parsing off the main thread. It parses ahead while scripts are being downloaded and executed. As in Firefox 3.5 and 3.6, the HTML parser starts speculative loads for scripts, style sheets and images it finds ahead in the stream. However, in Firefox 4 and later the HTML parser also runs the HTML 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 id="Making_speculative_loads_succeed">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>If you use a <code><base></code> element to override the base URI of your page, put the element in the non-scripted part of the document. Don't add it via <code>document.write()</code> or <code>document.createElement()</code>.</li>
</ul>
<h2 id="Avoiding_losing_tree_builder_output">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></script></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><script>document.write("<div>");</script></code> is bad. <code><script>document.write("<div></div>");</script></code> is OK.</li>
<li>Don't write an unfinished token. <code><script>document.write("<div></div");</script></code> is bad.</li>
<li>Don't finish your writing with a carriage return. <code><script>document.write("Hello World!\r");</script></code> is bad. <code><script>document.write("Hello World!\n");</script></code> is OK.</li>
<li>Note that writing balanced tags may cause other tags to be inferred in a way that makes the write unbalanced. E.g. <code><script>document.write("<div></div>");</script></code> inside the <code>head</code> element will be interpreted as <code><script>document.write("</head><body><div></div>");</script></code> which is unbalanced.</li>
<li>Don't let the semicolon of a named character reference be the last thing that is written. Due to a <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=535530" title="https://bugzilla.mozilla.org/show_bug.cgi?id=535530">bug</a> in Firefox 4 though 10 (fixed in Firefox 11), <code><script>document.write("foo&nbsp;");</script></code> causes a speculation failure. However, <code><script>document.write("&nbsp;foo");</script></code> is OK.</li>
<li>Don't format part of a table. <code><table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table></code> is bad. However, <code><script>document.write("</code><code><table></code><code><tr><td>Hello World!</td></tr></code><code></table></code><code>");</script></code> is OK.</li>
<li>TODO: document.write inside other formatting elements.</li>
</ul>
|
