使用 JavaScript 将行附加到表单元素内的表格比没有表单元素慢

Question

我最终将此问题报告为错误。似乎会影响 webkit 浏览器。 https://code.google.com/p/chromium/issues/detail?id=233677

下面的原始问题。

---

我正在使用带有 Christian Bach 的 tablesorter 2 插件的 jQuery 1.8.1 并遇到了一个特殊的问题。 （jQuery 1.7.1 和 tablesorter 1 也有同样的问题。）

我有一个包含数百行的表格，它在大约 1 秒内排序。

当我将表格包装在 HTML <form> 元素中时，tablesorter 插件变得非常慢。大约 500 行的表格需要 8 秒以上的时间进行排序。

我只调用 $("#table").tablesorter() 没有额外的参数，只是纯 HTML 没有其他 JavaScript 或 CSS。

此表的 HTML 约为 1.2mb，每个 <td> 都包含其他 HTML 元素，例如 <button>、<div>、<span>、<a>、...

您知道<form> 元素可能会干扰什么吗？谢谢，/w

编辑：这是一个只有 10 行的示例。将实际时间缩放到 500，并将表格包裹在 <form></form> 中，看看这如何减慢排序速度。 http://pastebin.com/95KAAb88

Answer 1

我发现这个问题并不是 tablesorter 或 datatables 独有的。可能是我的 Chrome (23) 版本中的 JavaScript 引擎。

我创建了一个简单的 jsfiddle。 Firefox 20.0 似乎没有这个问题。

http://jsfiddle.net/wsams/yGpdv/27/

如果您打开 Web 开发人员控制台并运行此脚本，请注意 Appending child 时间。这是将行追加到表所需的时间。

经过几次后，只需像这样将表格包裹在<form>中，

<form>
<table>
    <thead>
        <tr>
            <th>count</th>
            <th>link</th>
            <th>input</th>
            <th>button</th>
            <th>count</th>
            <th>link</th>
            <th>input</th>
            <th>button</th>
        </tr>
    </thead>
    <tbody>
        <tr id="tr1">
            <td>item 1</td><td><a href="text.html?key=value&amp;dog=poodle&amp;cat=siamese">a big link</a></td><td><input type="text" value="something" /></td><td><button type="submit" name="test" value="why">why this</button></td><td>item 1</td><td><a href="text.html?key=value&amp;dog=poodle&amp;cat=siamese">a big link</a></td><td><input type="text" value="something" /></td><td><button type="submit" name="test" value="why">why this</button></td>
        </tr>
    </tbody>
</table>
</form>

现在再次运行脚本并记下Appending child 次。我看到它从每次追加约 0.040 毫秒到约 8 毫秒。当您添加更多行时，它似乎也呈指数级增长。

对我来说，这肯定是原生 JavaScript DOM 函数的问题，但我不是这方面的专家。