javascript - 当 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！
你们认为问题出在机器那么慢吗？

有没有办法改进选择器？

score 2 · Accepted Answer

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

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

请注意，.find递归地沿着节点向下移动，其中 as.children仅查看紧接在指定项目下方的元素。匹配的元素至少会减少 50%。

jsperf

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

通过存储当前选定的元素，您无需遍历大量 tr 元素即可找到选定的元素。

也许对您来说更简单的选择是为当前选择的选项提供“currentlySelectedTr”的 id。id 查找确实由 Web 浏览器优化。

score 0 · Accepted Answer

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

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

然后为了切换一个类，你可以这样做：

myTableRow.toggleClass('selected');

- 编辑 -

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

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

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