使用JavaScript将行追加到表单元素内的表中的速度比不使用表单元素时慢

我最后把这个问题作为bug报告了。似乎会影响webkit浏览器

原始问题如下

---

我在使用jQuery1.8.1和ChristianBach的TableSorter2插件时遇到了一个特殊的问题。（jQuery1.7.1和TableSorter1也有同样的问题。）

我有一张有数百行的桌子，它大约在1秒内排序

当我用HTML

元素包装表格时，tablesorter插件会变得非常慢。一张大约500行的表格需要8秒以上的时间来排序

我只调用

$（“#table”）.tablesorter（）

，没有额外的参数，只调用纯HTML，没有其他JavaScript或CSS

---

此表的HTML大约为1.2mb，每个

包含额外的HTML元素，如

，

，

，

，
我发现此问题并非tablesorter或datatables所独有。可能是我的Chrome版本（23）中的JavaScript引擎

我创建了一个简单的JSFIDLE。Firefox20.0似乎没有这个问题


如果打开web developer控制台并运行此脚本，请注意追加子项的时间。这是将行追加到表中所需的时间

经过几次之后，只需像这样将表包装在
中

<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>


计数
链接
输入
按钮
计数
链接
输入
按钮
项目1为什么要这样项目1为什么要这样

现在再次运行脚本，并记下追加子项的次数。我看到它从大约0.040毫秒每追加到~8毫秒。当您添加更多行时，它看起来也有点像指数

对我来说，这一定是本地JavaScript DOM函数的问题，但我不是这方面的专家。
试试其他插件，tablesorter上一次更新是在2008年，是为jQuery 1.2编写的。例如，或。另外，在pastebin上制作问题的工作演示而不是proken php文件也是一个明智的想法。我只是想说，我已经跟踪到了函数
appendToTable（table，cache）
行
tableBody[0]。appendChild（r[pos][j]）@dtech，这是一个工作的HTML文档，而不是PHP（您只需要下载jQuery和tablesorter并引用它们。）我没有tablesorter的CDN，所以我没有使用JSFIDLE.net。我也不想发布完整的HTML页面；它非常难看，并且超过1mb的文本。我看过其他的表格分拣机，但这是项目选择和定制的（不影响性能）。“我无权更改任何内容。@dtech，我在这张表上尝试了datatables.net，效果非常好。”。如果可能的话，我建议我们使用这个。谢谢你的推荐。我仍然很好奇，虽然
完全搞乱了tablesorter，但我只想将这个问题标记为已解决。我在使用JQuery Mobile时遇到了类似的问题。表格创建很快，直到我将其包装到表单中。我的解决方案是在构建表之后简单地将表包装成表单。我在github上有一个更新的表排序器fork：原始插件的问题是它会将每一行一次附加到DOM中，这是一种比一次完成所有操作慢得多的方法。我没有添加这个作为答案，因为我不确定为什么用一个表单包装它会有这么大的不同。Datatables是一个很好的选择，但我不喜欢它，因为它的大小超过了200k，这就是我开始更新tablesorter.Hi@Mottie的原因。我尝试了一下您的版本，速度快了一点，但对于我正在处理的非常大的表，仍然存在类似的问题。我希望我可以把它换成你的，因为我们有很多定制和Java逻辑来构建表。我相信我在数据表方面遇到了更糟糕的问题。这张桌子需要重新设计；它不应该是兆字节的纯文本。谢谢你的建议。