Question

我的问题很简单。我有一个HTML表格，例如以下内容：

<table>
   <tr class="table-header">
      <td>first</td>
      <td>second</td>
      <td>third</td>
   </tr>
</table>

哪种选择<td>元素最有效？对我来说，性能是最重要的。

我应该只使用$("table-header td")，还是将class="table-header-cell"添加到每个<td>，并将其作为$('table-header-cell')

进行处理

您可以抽象示例。这是一个非常简单的情况，但深层嵌套的HTML元素呢？是否值得添加深层嵌套元素自己的类或只是＆＃34;抓住＆＃34;一些高级元素（最接近的一个具有唯一标识符[如：name，id或class]到我们的目标）并写一个长的＃34;亲属＆＃34;选择？

Answer 1

通过向每个元素添加类来实现它会更容易，而且更直接，但如果您不想为每个元素添加类，那么请使用设置class或{{1以表格方式id。

表现明智没有区别，这无关紧要。

$(".table-header td")

$(".table-header td").css({color: "red"});

.table-cell
{
  color: red;
}

Answer 2

ID选择最快，紧接着是类选择器。由于存在倍数，类选择器将是最快的选择，但是存在折衷的解决方案。

当Sizzle评估来自从右到左的选择器时，长选择器实际上是最慢的选项。你可以使用一个初始选择器来使用类（非常快）来定位祖先，然后从那里find TD（合理地快，因为它只针对DOM的那个分支）：

即

$(".table-header").find("td")

或范围选择器

$("td", ".table-header")

在任何情况下，请确保您不会受到过早优化的影响。分析工具将有助于研究各种选择方法的相对速度。正如@A. Wolff指出的那样，与原始浏览器方法相比，jQuery不是最快的解决方案，所以无论你做什么都是妥协。

Answer 3

您必须想象如何执行搜索。选择器可能会搜索多个元素，这意味着即使只有一个要查找的元素，您也只是在搜索整个DOM。所以从逻辑上讲，通过它的id搜索某些东西几乎肯定会更快，因为jQuery只是调用document.getElementById而不是执行搜索。完成。

浏览器会记下每个带有id的元素的位置，这样你就不会通过id找到一个元素，而是从缓存中调用它来获得性能。所以规则＃1：尽可能使用 ids 。

假设你正在寻找一个id以下的孩子。它不能像上面那样简单地调用document.getElementById。没错，但jQuery优化了这样的搜索。像上面一样检索父元素，然后在该元素的DOM内完成搜索。这意味着，甚至可以优化对ID下儿童的搜索。所以规则＃2：尽可能使用 ids 。

特定路径应优先于更通用的路径。这是因为如果您提供更多信息，搜索可能元素的子集会减少。换句话说，$（'table tbody tr td'）优于$（'table td'）。你不会期望在thead中找到一个td，但无论如何都会在thead中执行搜索。所以规则＃3：更喜欢更具体的路径。

特定路径有帮助，但只有将其与规则＃4结合使用才能使用＆gt;确保元素是父元素的直接子元素。换句话说，$（'table＆gt; tbody＆gt; tr＆gt; td'）击败$（'table tbody tr td'）。如果没有这个，必须搜索所有子元素。对于小型表，这可能没有太大区别，但它对使用较大表的性能有直接影响。规则＃4：使用＆gt;尽可能选择父母的直接子女。

最后，是否更有效率地按班级搜索所有孩子？如果您说，在具有给定类的表下搜索所有tds而不是使用给定类的所有tds，则会有一个小的性能改进。这主要是因为在一种情况下，您正在使用找到的类收集元素下的所有td标记，而在另一种情况下，您正在检查该类的每个td标记。如果有很多子元素，这种差异会更明显，但除非你真正处理成千上万的元素，否则我认为差别不大。所以规则＃3：除非你需要按类别区分每个子元素，否则更喜欢通过父元素选择子元素（table.myclass td而不是table td.myclass）。

TL; DR;

总结：

尽可能使用 ids 。
更喜欢更具体的路径。
使用＆gt;尽可能选择父母的直接子女。
除非您需要按类别区分每个子元素，否则更喜欢通过父元素选择子元素（table.myclass td而不是table td.myclass）。

Answer 4

取决于您想要做什么，但如果您使用自己的标记名称浏览元素，则代码会变得更加清晰。

选择器使用行的类＆＃34; table-header ＆＃34;并选择所有＆＃34; td ＆＃34;内部

$(".table-header td");

选择器使用表格标签的名称并选择所有＆＃34; td ＆＃34;内部

$("table tr td");

只是为了帮助您改进代码，您可以使用＆＃34; ＆＃34;，它特定于表格标题

<table>
   <th>
      <td>First Header</td>
      <td>Second Header</td>
      <td>Third Header</td>
   </th>
   <tr>
      <td>First Element</td>
      <td>Second Element</td>
      <td>Thrid Element</td>
   </tr>
</table>

...所以你可以使用更具体的标签选择器

$("table th");
$("table th td");

Answer 5

使用jQuery，避免像$('.table td')这样的子选择器通常更有效率，因为如果浏览器不支持document.querySelectorAll，那么这需要额外的解析，然后DOM导航返回所选元素。对于等效选择器，最好使用$('.table').find('td')。

但是对于你的例子，在你想要选择的每个<td>元素上都有一个类并使用单个类名选择器是最高效的，它将在内部使用对本机函数的调用{{ 1}}这是更少的工作，因此更快。

这里有关于选择器性能的文档：http://learn.jquery.com/performance/optimize-selectors/

使用什么类型的jQuery选择器？

5 个答案: