Question

据我所知，这是Firefox中推测性执行的问题。这是整个html演示文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Foo</title>
  </head>

  <body>
    <script language="JavaScript" type="text/javascript">

document.write("<table>")
document.write("<tbody>")
document.write("<tr>")
document.write("<td>")
document.write("<textarea rows='10' cols='12'>")
document.write("</textarea>")
document.write("</td>")
document.write("</tr>")
document.write("</tbody>")
document.write("</table>")

    </script>
  </body>
</html>

加载到Firefox后，我在控制台上收到以下消息：

An unbalanced tree was written using document.write() causing data from the network to be reparsed. For more information https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing1 bug.html:22:0

我不相信我正在写一棵不平衡的树。任何人都可以建议一种简单的方法来避免这种情况吗？

Answer 1

为什么你不打电话给document.write一次？像这样：

document.write("<table><tbody><tr><td><textarea rows='10' cols='12'></textarea></td></tr></tbody></table>");

或者如果你想保留分隔线，你可以使用反斜杠：

document.write("<table>\
<tbody>\
<tr>\
<td>\
<textarea rows='10' cols='12'>\
</textarea>\
</td>\
</tr>\
</tbody>\
</table>");

编辑：以上解决方案无法解决问题，因此您只能将其放入体内：

document.documentElement.innerHTML = "<table>\
<tbody>\
<tr>\
<td>\
<textarea rows='10' cols='12'>\
</textarea>\
</td>\
</tr>\
</tbody>\
</table>";

Answer 2

看起来这是一个与textarea 内的 table完全相关的特殊情况。

单独
table不会导致此问题，textarea内的div也不会导致问题textarea table内部textarea也不会。

可能某种程度上与<内容的具体处理相关（例如，即使>和<等特殊字符未通过{>等实体转义，也会将标记显示为文字1}} / document.write()）与常规元素进行比较。

摆脱parts调用的一种相对简单的方法是在使用document.write()的代码之前创建一个数组（例如document.write()）并替换所有{{1}使用parts.push()进行调用，然后将parts.join('')分配给整个容器的innerHTML属性。

Firefox中的document.write（）不平衡树

2 个答案: