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

Question

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

您可以在jsperf上进行的编辑中查看结果:http://jsperf.com/jquery-document-cached-vs-uncached/3 (编辑:标题包含"jsquery",因为这是原始测试,我的编辑包含vanilla javascript,框架没什么区别)

这真让我好奇.基本上我在这个等式中引入了一个新的变量,这怎么能让事情更快而不是更慢？

据我所知,"打印"应该优于"b = a;打印b"(演讲图)这种情况有什么不同？

Answer 1

我相信我在这里找到了解释（最后一部分的重点是我的）：

\n\n

\n

存储对浏览器内对象的指针引用。使用此技术可以在实例化期间存储对浏览器对象的引用以供以后使用，从而减少 DOM 遍历次数。例如，如果您不希望 DOM 发生更改，则应该存储对 DOM 或创建页面时要使用的 jQuery 对象的引用；如果您正在构建 DOM 结构，例如对话框窗口，请确保在实例化期间在其中存储一些对 DOM 对象的方便引用，这样您就不需要一遍又一遍地查找相同的 DOM 对象当用户单击某项或拖动对话框窗口时再次出现。如果您没有存储对 DOM 对象的引用，并且需要在函数内进行迭代，则可以创建一个局部变量n 包含对该 DOM 对象的引用，这将大大加快迭代速度，因为局部变量存储在堆栈中最容易访问的部分。

\n

\n\n

所以，如果我理解正确的话，将 DOM 缓存在局部变量中可以更轻松地在内存堆栈中访问，从而提高执行速度。

\n