diff options
Diffstat (limited to 'files/zh-cn/glossary/speculative_parsing/index.html')
| -rw-r--r-- | files/zh-cn/glossary/speculative_parsing/index.html | 29 |
1 files changed, 29 insertions, 0 deletions
diff --git a/files/zh-cn/glossary/speculative_parsing/index.html b/files/zh-cn/glossary/speculative_parsing/index.html new file mode 100644 index 0000000000..bded58d8fd --- /dev/null +++ b/files/zh-cn/glossary/speculative_parsing/index.html @@ -0,0 +1,29 @@ +--- +title: 对页面预解析进行优化 +slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing +translation_of: Glossary/speculative_parsing +--- +<p>在传统的浏览器中，HTML 解析器运行于主线程之中，并且在遇到 </script> 标签后会被阻塞，直到脚本从网络中被获取和执行。 Firefox 4 和后续的版本支持从主线程中分离的预解析技术。 当脚本在获取和执行的过程中，预解析技术能提前解析HTML文档。在Firefox 3.5 和 3.6中, HTML 解析器能够在文档流中预先加载脚本、层叠样式表和图片。然而, 在Firefox 4 和后续的版本中 HTML 解析器也预先运行HTML 树构建算法。 这一举措的优点是当预解析成功后，就没有必要再重新解析已经扫描过并且成功下载的脚本，层叠样式表和图片；缺点就是当预解析失败之后，有很多工作需要去做。</p> + +<p>这篇文档旨在帮助你避免预解析失败和页面加载变慢。</p> + +<h2 id="使预加载成功">使预加载成功</h2> + +<p>让脚本、层叠样式表和图片预加载成功的规则只有一条:</p> + +<ul> + <li>如果你使用 <code><base></code> 元素重载页面的基 URI，将这个元素放置到文档的非脚本部分。不要通过 <code>document.write()</code> 或者 <code>document.createElement() 添加</code>.</li> +</ul> + +<h2 id="避免树构建器的输出丢失">避免树构建器的输出丢失</h2> + +<p>当document.write() 改变了文档树的状态时，树构建器的预构建过程会失败。 例如，当所有被<code>document.write() 插入的内容被解析之后</script></code> 标签后的预处理状态不再持有。 然而，只有不寻常地使用 <code>document.write()</code> 才会产生问题。 这些事情需要避免：</p> + +<ul> + <li>不要写不对称的文档树。<code><script>document.write("<div>");</script></code> 很糟糕。<code><script>document.write("<div></div>");</script></code> 则是可行的。</li> + <li>不要写未完成的标识。 <code><script>document.write("<div></div");</script></code> 很糟糕。</li> + <li>不要以回车结束内容。 <code><script>document.write("Hello World!\r");</script></code> 很糟糕。 <code><script>document.write("Hello World!\n");</script> </code>则是可行的。</li> + <li>注意即使对称的标签也可能导致文档的不对称。 比如：<code>head</code> 元素中的<code><script>document.write("<div></div>");</script></code> i会被解析成 <code><script>document.write("</head><body><div></div>");</script></code> 因次文档是不对称的。</li> + <li>不要仅格式化部分表格。 <code><table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table></code> 很糟糕。然而， <code><script>document.write("</code><code><table></code><code><tr><td>Hello World!</td></tr></code><code></table>");</script></code> 则是可行的。</li> + <li>TODO: 在其它格式化元素中使用document.write。</li> +</ul> |