jquery选择器性能 - 带或不带标记的类

Question

只想问下面哪一个是与Jquery一起使用的更好选择

$('#thisontainer div.thisWrapper')

或

$('#thisontainer .thisWrapper')

是第二个更快？

另外我有兴趣知道为什么html标签在添加到Jquery Selectors时性能会降低，我也相信CSS选择器？

三江源

Answer 1

我会做$('#thisontainer').find('.thisWrapper');

http://24ways.org/2011/your-jquery-now-with-less-suck/

Answer 2

如果您有类属性，请不要将其与标记名称一起使用，只需使用类名

即可

看看这个jspref test

Answer 3

有排名。

http://www.vanseodesign.com/css/css-selector-performance/

它试图说的是id最快，然后是类，然后是标签。

<击> 标签较慢的原因是在场景浏览器后面映射出页面上的所有数据。当你说这样的事情a.mySweetClass从左到右解析时。因此，抓取所有a标记，然后从A标记中删除mySweetClass。我读过一篇更好的文章，我希望我能找到它。我会继续看，我也会很快给你提供一些更好的时序图。

CSS选择器从右到左进行评估：

我的坏：但这里有一些有趣的结果 http://jsperf.com/jquery-tag-vs-class

Answer 4

我认为不会有任何显着差异。

渲染html标签和处理css规则或jQuery选择器是一项昂贵的任务，为了保持可接受的性能，必须谨慎使用它们。我发现即使是非常简单的CSS规则也会导致严重的性能问题。

所以这里有一些建议：

1. 每当您创建CSS规则时，请考虑如何处理它。作为每个节点背景的动画gif可能会大大减慢网站的速度，因为必须为每个节点独立处理图像：* {background：url（bkg.gif）; }

2. 不是在整个DOM中重复节点搜索，而是在已经找到的DOM树的部分中搜索节点。所以代替：

   for(var i=0; i < 100; i++)
     $('#thisontainer .something').somecall();
   

   使用：

   var c = $('#thisontainer');
   for(var i=0; i < 100; i++)
     $('.something', c).somecall();
   

3. 请注意在setInterval或setTimeout调用中对DOM所做的更改。对DOM的更改通常比简单的变量处理更昂贵，因此不要将重要值存储为jQuery的.jata（）

将它们存储在javascript对象中。