1

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

$('#thisontainer div.thisWrapper')

或者

$('#thisontainer .thisWrapper')

第二个更快吗？

我也很想知道为什么将 html 标签添加到 Jquery 选择器时性能会降低，我也相信 CSS 选择器？

谢谢你

4

4 回答 4

4

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

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

于 2013-06-12T02:46:36.770 回答
2

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

看看这个jspref测试

于 2013-06-12T02:52:34.987 回答
1

有一个排名。

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

它想说的是 id 最快，然后是 classes，然后是 tags。

标签速度较慢的原因是浏览器在后台映射出页面上的所有数据。当你说这样的事情时a.mySweetClass，从左到右解析。所以所有a标签都被抓取，然后从 A 标签中，它被减少到mySweetClass. 我读过一篇更好的文章，我希望我能找到它。我会继续看下去，我也会很快为您提供一些更好的时序图。

CSS 选择器从右到左评估：

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

于 2013-06-12T02:51:02.150 回答
0

我认为这两种方式都不会有显着差异。

渲染 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 的 .data() 将它们存储在 javascript 对象中

于 2013-06-12T03:17:40.470 回答