javascript - Jquery 选择器性能和行为

Question

这个问题已经有答案了:

Performance of jQuery selectors vs local variables (5 个回答)

已关闭 8 年前。

我有一个关于 jquery 选择器行为的奇怪问题。

第一种方法:

$('#div').find('#something').html('hahah');
$('#div').find('#something').html('hahah');
$('#div').show();

第二种方法:

var $div = $('#div');
$div.find('#something').html('hahah');
$div.find('#something').html('hahah');
$div.show();

我知道它可能没有太大区别，但是第二个比第一个快吗？我一直使用第二种方法，但我不确定是否有区别，因为我不知道 jquery 选择器算法是如何工作的。

Answer 1

第二种方法更快/更好，因为您已经缓存了选择器。

每次调用$('selector')时，都会调用jQuery选择器引擎(sizzle)来定位所需的元素。

但是，当您将它们存储在变量中时，您不需要在存储结果时重复调用选择器引擎。

请注意，在上面的示例中，还可以通过存储 find() 结果来进一步改进缓存

var $something = $('#div').find('#something');
$something.html('hahah');
$something.html('hahah');
$something.show();