Question

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

以下原始问题。

我正在使用jQuery 1.8.1和Christian Bach的tablesorter 2插件并遇到一个特殊的问题。（与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.040ms到大约8ms。当你添加更多行时，它似乎也有点指数。

对我来说，它必须是原生JavaScript DOM功能的问题，但我不是这方面的专家。

使用JavaScript比没有表单元素更慢地将行添加到表单元素内的表中

1 个答案: