为什么通过缓存变量访问DOM更快？

Question

我正在努力提高我对javascript的了解，并在搜索一些“最佳实践”时，有人向我指出，缓存DOM文档然后通过该var访问它而不是直接访问文档对象更快。

你可以在这里看到结果，我在jsperf上做了一个编辑：http://jsperf.com/jquery-document-cached-vs-uncached/3（编辑：标题包含“jsquery”因为那是原始测试，我的编辑包含vanilla javascript，框架没什么区别）

这真让我好奇。基本上我在方程式中引入了一个新变量，如何使事情更快而不是更慢？

据我所知，“打印”应该优于“b = a;打印b”（演讲图） 在这种情况下有什么不同？

Answer 1

document与普通的Javascript变量不同。在访问其属性时，尤其是可以根据内部浏览器结构的需求创建的DOM，无法确定在幕后发生了什么奇怪的魔法。

Answer 2

我相信我找到了一个解释here（强调最后一部分是我的）：

  

将指针引用存储到浏览器内对象中。使用此技术   通过存储对浏览器对象的引用来减少DOM遍历行程   在实例化期间供以后使用。例如，如果你不是   期望你的DOM改变你应该存储对DOM或的引用   创建页面时要使用的jQuery对象;如果你   正在建立一个DOM结构，如对话框窗口，请确保你   在它期间存储一些方便的DOM对象引用   实例化，所以你不需要在一个上找到相同的DOM对象   当用户点击某些内容或拖动对话框时再次重复   window.If你没有存储对DOM对象的引用，并且你需要   要在函数内迭代， 可以创建局部变量   包含对该DOM对象的引用，这将是相当大的   加速迭代，因为局部变量存储在最多   堆栈的可访问部分 。

因此，如果我理解正确，在局部变量中缓存DOM可以更容易地访问内存堆栈，从而提高执行速度。