1

我有 3 个关于选择器性能的查询：

首先，以下语句是否存在性能差异：

$('#content .someclass')和$('.someclass', '#content')

我一直使用第一种方式，但最近似乎有更多人转向第二种方式。两者之间有什么好处吗

其次，如果我添加div.someclass，那会比仅仅更好.someclass（如果 someclass 的所有元素无论如何都将是 div ）。我原以为在这种情况下第一个会更慢，因为它必须首先获取所有 div，然后是那些，.someclass但由于我不确定选择器是如何工作的，我只是在猜测

最后，如果我使用$(this)，缓存这个对象会更好 -var $thisobject = $(this)还是没有区别？我一直认为$(this)它本身就是一个 jQuery 对象，但我现在认为它实际上正在转换this为一个 jQuery 对象，所以也许将它粘贴到一个变量中会比调用多个更好$(this)

4

3 回答 3

1

尚未提及的是浏览器之间会有所不同。在不支持的浏览器中querySelectorAll，策略会发生变化。例如，如果浏览器确实支持该方法，那么类似$('#id').find(' > li > a')的东西可能会非常快......在不支持的浏览器（旧版 IE，最显着）上，你可能会更好地使用类似$('#id').children('li').children('a').

于 2013-06-04T17:22:02.593 回答
1

除了您列出的两个之外，还有第三种选择：

1: $('#content .someclass')

2: $('.someclass', '#content')

3: $('#content').find('.someclass')

我们可以在不进行任何测试的情况下肯定地说的一件事是#3 比 #2 快。那是因为#2 在内部变成了#3。这是执行此操作的jQuery 源代码。它在init()真正是 jQuery 构造函数的函数中。经过相当长的一系列测试后，它会检测到您已拨打电话$(selector,context)并$(context).find(selector)改为拨打电话：

// HANDLE: $(expr, context)
// (which is just equivalent to: $(context).find(expr)
} else {
    return this.constructor( context ).find( selector );
}

你可以自己$(context).find(selector)打电话并避免额外的检查。

所以#2 永远不是最快的代码；#3 将永远击败它。

同样正如@KevinB 指出的那样，#2不是/函数的记录使用。这可能只是文档中的一个疏忽，因为它是对 #3 的直接转换，这是对该函数的记录使用，并且代码多年来一直以这种方式工作。$jQuery

在任何情况下，即使在记录的案例中，也几乎没有任何理由使用 #2，因为 #3 更快且更容易理解。

#3 与 #1 相比如何？在大多数情况下可能更快，但它可能因浏览器以及特定选择器和页面复杂性而异。jsPerf在这里是你的朋友，但一定要给它一个与重要的页面相似的页面，而不仅仅是一个人为的测试。

div.someclassvs.也是一样的.someclass。测试一下看看。

关于，当它们只是普通的 JavaScript 函数调用时$(this)，这个函数名称有时会让事情看起来很神奇。$为了便于理解，请尝试使用jQuery函数名称：

jQuery(this)

现在应该更清楚了，这确实是一个函数调用，而不是某种神奇的语法。使用$(this)or时$(anything)也是如此：它始终是函数调用。所以是的，如果您重复使用它，最好将结果保存在变量中：

var $this = $(this);

我唯一的建议是不要命名变量$thisobject。多余的object措辞并没有真正使名称更加清晰。$this其他开发人员会更熟悉一个简单的。或者使用更具描述性的名称可能更好，例如

var $element = $(this);

一般来说，this并且$this在 jQuery 代码中被严重过度使用，最好尽可能使用具有简短但描述性名称的普通变量。

考虑这个人为的 jQuery 插件：

jQuery.fn.log = function() {
    this.each( function() {
        console.log( this );
    });
    return this;
};

在这个简短的函数中，this改变了两次含义：首先是 jQuery 对象，然后是该对象的单个元素，然后又是 jQuery 对象。难怪人家有烦恼this！

相反，您可以使用命名参数来.each()：

$.fn.log = function() {
    this.each( function( i, element ) {
        console.log( element );
    });
    return this;
};

这不那么令人困惑了，如果你需要一个 jQuery 对象用于element内部函数，你可以用同样的方式来做this：

var $element = $(element);
于 2013-06-04T17:05:16.290 回答
1

这取决于选择器的确切性质。

一般来说，最好让浏览器完成所有繁重的工作，因为它可以直接访问 DOM，因此您可能期望前者更快。

AIUI，浏览器通常在选择器中从“右到左”工作，因此它会找到所有具有类的元素，.someclass然后将结果过滤到那些是#content.

但是，在这种特定情况下，“父级”由 ID 标识，因此告诉浏览器从该特定元素开始并仅考虑其后代可能会更快。

换句话说，“这取决于”。尝试在真实页面或 jsperf.com 上，看看会发生什么。

于 2013-06-04T15:54:53.070 回答