Javascript 当模板有空白/文本节点时，WebKit会使DOM插入变慢吗？

以下代码在以下浏览器中运行缓慢：

• 铬26.0.1410.65（Mac）
• Safari 6.0.4（Mac）

HTML:

…但是如果我从模板中去掉空格和换行符，它会运行得非常快

你自己试试吧：

Firefox 26.0（Mac）、Chrome Canary 28.0.1500.3（Mac）和IE9没有出现这个问题。

Ryosuke Niwa从我的角度指出：

原因是我们不为空文本创建渲染器 因此，我们遇到了Node:：attach（）中最糟糕的O（N2）情况。 （请参见节点：：附加（）中的修复。）

这个补丁添加了一个逻辑来避免O（N2）情况。 具体地说，如果遇到文本节点，补丁将退出循环 我们再次决定不为其创建渲染器。这项纾困计划非常成功 这是合理的，因为我们再次决定不创建渲染器 对于文本节点，表示不会影响结果 其余同级节点的Text:：textrenderisneeded（）

---

每个空格拉伸都会生成一个新节点，因此使用换行符和标记之间的间距时，节点计数要比仅使用元素节点时高得多。我想知道这是否适用于一般的HTML布局；也许HTML优化是值得的…你说它在这两种浏览器中运行缓慢。它在FireFox、IE等浏览器中运行缓慢吗？确实，它们会形成新的节点。现代WebKit是什么让它窒息的，而Firefox和Chrome金丝雀却让它窒息？

<ul></ul>

<script type="text/html" id="template">
<li>
  Lorem ipsum dolor…
</li>
</script>

# Setup
list = $ 'ul'
templateText = $('#template').text()

# Append 1000 list items
list.append templateText for i in [1..1000]