javascript - 性能问题: storing a reference to DOM element vs using selectors

Question

因此，在我的应用程序中，用户可以在某些 div 标签内创建一些内容，并且每个内容(或者我称之为“元素”)都有自己的对象。目前，我使用一个函数来使用 jquery 选择器计算该元素已放置在其中的原始 div 标签，但我想知道在性能方面，一旦元素已存储对 div 标签的引用不是更好吗？已创建，而不是稍后计算？所以现在我使用这样的东西:

$('.div[value='+divID+']')

但当我创建元素时，我可以将引用存储在元素内。这对性能会更好吗？

Answer 1

如果您有很多这样的绑定(bind)，最好存储对它们的引用。正如评论中提到的，变量查找比在 DOM 中查找要快得多 - 特别是使用您当前的方法。 jQuery 选择器比纯 DOM 选择器慢，并且该特定选择器将非常慢。

以下是基于 epascarello 的测试，显示了 jQuery、DOM2 方法和引用之间的差异:http://jsperf.com/test-reference-vs-lookup/2 。正如预期的那样，变量分配速度非常快。此外，DOM 方法以同样大的优势击败了 jQuery。请注意，这是以雅虎主页为例。

另一个考虑因素是 DOM 的大小和复杂性。随着这个增加，引用缓存方法变得更加有利。