Question

让我们说我会多次瞄准一个元素，效率更高？

示例1：

var el = $("#element");
el.html("foo");
el.html("bar");

示例2：

$("#element").html("foo");
$("#element").html("bar");

或者根本没有区别？

Answer 1

示例1效率更高，因为您只需调用$()一次并重复使用同一对象进行后续.html()调用。

它不会产生大量数字，但如果您知道要与相同的元素（或元素集）进行交互，那么每次调用它都显然是多余的。

Answer 2

在大多数情况下，您可以链接方法：

$('#element')
    .html('foo')
    .html('bar')

通过这种方式，您可以获得性能和可读性。

Answer 3

第一个例子更有效率;并直接列在jQuery Performance Rules; 它是规则3 - 缓存jQuery对象。

Answer 4

我知道这里已有其他答案，但是示例1效率更高，你现在应该从现在开始而不是以后使用它。

您的示例中性能差异很小的原因是因为您的选择器具有最高的DOM特性。在任何HTML页面上只应该使用一个ID EVER。即使你在物理上写两次相同的ID，jQuery也只会针对第一个实例。

如果你要做一些更复杂的事情，比如：

$('form').find('input[type="text"]').filter(function(index){
    return $(this).css('color') == 'green';
}).somePlugin();

$('form').find('input[type="text"]').filter(function(index){
    return $(this).css('color') == 'green';
}).anotherPlugin();

然后将它缓存以获得更好的性能更值得：

var target = $('form').find('input[type="text"]').filter(function(index){
    return $(this).css('color') == 'green';
});

target.somePlugin();
target.anotherPlugin();

为元素创建变量或每次选择它是否更有效？

4 个答案: