获取DOM元素的性能差异

Question

这可能与小而简单的DOM元素无关，但假设我有一些大型复杂的DOM元素，将元素存储在变量中使用它与使用jQuery选择器不断获取它之间存在很大的性能差异吗？ / p>

$('myDomElement').css('height', 500);
$('myDomElement').css('width', 500);
// do more stuff using $('myDomElement')

VS

var myDomElement = $('myDomElement');
$(myDomElement).css('height', 500); 
// do more stuff to myDomElement var

Answer 1

这取决于。

如果您所做的只是对一个元素进行一系列操作，但之后不再使用该元素，则最好执行一次查找并使用jQuery链接。大多数jQuery函数返回元素，因此您可以将几个函数链接在一起，如下所示：

$('#myDomElement').css('height', 500)
                 .css('width', 500);

但是，如果您发现自己需要对相同的元素执行多次查找，则应该将其保存到变量中。如果您在脚本中找到了不再需要元素的位置，请不要忘记将其设置为null或以其他方式将其删除。这将允许垃圾收集来获取它，并减少脚本的内存占用。

var el = $('#myDomElement');
el.css('height', 500);

//... further down in your script

el.css('height', 400);
el = null; //Will be picked up by GC

希望有所帮助，祝你好运：）

Answer 2

第二种方法是正确的，因为你的元素是caching the selector：

var myDomElement = $('myDomElement');
myDomElement.css('height', 500); 
// do more stuff to myDomElement var

在这种情况下，jQuery不会再次解析你的DOM以找到之前已经找到的东西。

在第一种情况下，每次调用$('myDomElement')时，jQuery都会在DOM中查找元素，并且完全没必要一直进行此搜索以获取相同的元素。