0

我最终将此问题报告为错误。似乎会影响 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()在没有额外参数的情况下调用，只是没有其他 JavaScript 或 CSS 的纯 HTML。

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

任何想法该<form>元素可能会干扰什么？谢谢，/w

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

4

1 回答 1

0

我发现这个问题不是 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 函数的问题，但我不是这方面的专家。

于 2013-04-16T20:31:35.073 回答