获取 DOM 元素的性能差异

Question

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

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

对

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

Answer 1

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

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

在这种情况下，jQuery 将不会再次解析您的 DOM 以查找它之前已经找到的内容。

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

Answer 2

视情况而定。

如果您所做的只是对一个元素进行一系列操作，但之后不使用该元素，最好执行一次查找并使用 jQuery 链接。大多数 jQuery 功能 return 元素，因此您可以像这样将多个功能链接在一起：

$('#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

希望对您有所帮助，祝您好运:)

performance difference for getting DOM element