将javascript变量转换为jQuery对象的成本是多少？

Question

有时我在Javascript函数中看到,如果jQuery重复使用变量的转换,则可以先将其分配给局部变量:

$variable = $(variable);

这是必要的,转换成本是多少？

Answer 1

无论如何,存储对象比每次想要在其上使用jQuery方法时重新实例化jQuery对象更快......即使它对于缓存$(this)或者微不足道也是如此$(anObject).

用于描述"现在存储,稍后使用"这种方法的术语是"缓存".它通常被称为"缓存"的原因是因为缓存是指存储对某事物的引用并使用它,而不会在以后再次获取相同的内容(非常非技术性,非100%准确的描述).

重点是处理选择器.jQuery每次都要查询DOM,这是很昂贵的部分.与DOM操作(以及jQuery首先处理您的选择)相比,生成对象和存储引用并不昂贵.

如果你只是从一个对象引用中创建一个jQuery对象,它就不会那么具有破坏性,因为发生的处理是jQuery对象的创建......所以它实际上仅限于jQuery为此做的事情.这仍然是很好的做法,仍然可以防止一些不必要的处理.例如,这个:

var element = document.getElementById("div_id");
$(element).someMethod();
// Later:
$(element).someOtherMethod();

效率稍低,因为每次都会创建一个新的jQuery对象.它可以很容易地压缩以存储对变量中单个jQuery对象的引用,并引用它.

我能想到的一个警告是,它不是一个实时的元素列表(如果选择DOM元素).例如,您可能希望使用类缓存所有元素testing-class,如下所示:

var myelements = $(".testing-class");

但是如果将另一个元素添加到带有testing-class类的DOM中,myelements则不会反映出来.它将具有相同的先前列表.因此,在这种情况下,显然需要重新查询和更新DOM myelements.

对我来说,缓存的最佳实践是在一个范围内....而不是整个页面.如果您正在运行一个函数,并且它选择了一些元素,请在开头缓存它,然后使用它.但是不要全局缓存它并在整个页面中使用它; 将其缓存为执行周期.

例如,我会这样做:

function someFunc() {
    var elements = $(".class-stuff");
    // Use `elements` here

    // code

    // Use `elements` here
    someOtherFunc(elements);
}

function someOtherFunc(el) {
    // Use `el` here
}

someFunc();

// Some time later:
someFunc();

但我不会这样做:

var elements = $(".class-stuff");

function someFunc() {
    // Use `elements`
}

function someOtherFunc() {
    // Use `elements`
}

someFunc();
someOtherFunc();

// Some time later
someOtherFunc();