当使用450Mhz机器的1000多个元素时，jquery选择器变慢

Question

我得到的东西包含大约1000个dom元素

  <table id="tableId">
    <tr class="selected"><td>Text 1</td></tr>
    <tr><td>Text 2</td></tr>
    ...
    <tr><td>Text 500</td></tr>
  </table>

问题是我需要做这样的事情：

y = new selected tr;
$("#tableId").find("tr").removeClass("selected").eq(y).addClass("selected");

这里的问题是选择器本身需要大约600毫秒来处理，这对我们正在做的事情来说太长了。

我正在使用的机器使用浏览器 opera10 并且在linux上只运行 450Mhz ！ 你们认为问题来自机器那么慢吗？

有没有办法改善选择器？

Answer 1

我不确定是否有一个好的答案。您需要尝试一些事情并比较基准。这是我的两分钱（再次）：

$("#tableId").children("tr").removeClass("selected").eq(400).addClass("selected");

请注意.find递归地向下移动节点，其中.children仅查看指定项目正下方的元素。至少减少50％的元素。

jsperf

Answer 2

您可以使用以下方法改进脚本：

$("#tableId tr").removeClass("selected").eq(y).addClass("selected");

Answer 3

我会告诉你如何通过编程逻辑来做到这一点：

• 存储对“所选元素”的引用
• 取消选择
• 选择新的

通过存储当前选中的元素，您不需要循环使用吨和吨的tr元素来查找所选元素。

对于您来说，可能更简单的选择是为当前选择的选项提供id“currentSelectedTr.id查找实际上是由Web浏览器优化的。

Answer 4

你应该像这样缓存选择器：

var myTableRow = $('#tableId').find('tr');

然后，为了切换课程，你可以这样做：

myTableRow.toggleClass('selected');

- 编辑 -

我首先创建了这样的缓存选择器：

var myTableRow = $('#tableId tr');

然而，在阅读Scott Kosman的this 24 ways article后，我了解到.find()方法更快。