代码之家  ›  专栏  ›  技术社区  ›  Mutation Person

哪些选择器可能更快?

  •  2
  • Mutation Person  · 技术社区  · 15 年前

    实际上有几个问题,

    假设下面两个将返回相同的结果集

    $("#MyTable tr");
    $("tr", "#MyTable");
    

    在使用父子CSS选择器约定或将上下文指定给选择器之间,性能有什么不同吗?

    另外,如果我可以保证一个tr将是一个表的直接子级,这会提高上述性能吗?

    $("#MyTable>tr")
    
    2 回复  |  直到 15 年前
        1
  •  3
  •   redsquare    15 年前

    $("#MyTable > tr") 可能不会实际工作,因为您应该将ad/tfoot或tbody作为表的直接子级。我认为FF/Chrome等将为您添加车身,因此选择开关应为

    $("#MyTable > tbody > tr")
    
        2
  •  1
  •   Community CDub    7 年前

    到目前为止,这三种方法中最快的是:

    $("#MyTable > tr")
    

    当您通过ID选择元素引用的直接子代时,选择是非常直接的。

    编辑:@redsquare已经指出,上面的内容在firefox和chrome中不起作用,因为这些浏览器会在表中附加tbody元素。

    上下文选择器基本上转换为“finds”,因此前两个选择器中最慢的是:

    $("tr", "#MyTable");
    

    当它变成这样的东西时 之前 任何选择都会发生:

    $('#MyTable').find('tr');
    

    当然,对你自己进行基准测试可能会有很大的好处。

    以下是先前关于SO的一些相关问题: