更快地调用方法然后从内存中检索某些内容

Question

所以这是我的问题:为什么调用方法比从内存中检索某些东西更快？

注意到在DOM元素上指定了id属性时,用户代理会自动将元素的引用附加到其全局范围.

由于用户代理已经引用了所有指定了其id属性的元素,为什么我需要使用document.getElementById("")？

在一个应用程序中,我会:

//Retrieving the value, I could possibly write this two way.
<script>
var fromGlobalScope = myElement.value;
var documentGetById = document.getElementById("myElement").value;
</script>


<input id="myElement" value="someValue" />

做一些研究,它得到了所有主流浏览器的支持,但是他们可能会有一些不支持的浏览器,这会破坏.

但是,我可以简单地写:

<script>

//See if the element is on the global scope.
var fromGlobalScope = myElement ||document.getElementById("myElement");

</script>

我相信图案正确,我可以自动引用所有具有id属性的元素.我不必调用document.getElementById();

使用常驻属性,我不必走DOM,会认为会有很好的性能优势.

我创建了一个jsPerf以查看好处:在此处输入链接描述

令我惊讶的是使用document.getElementById()要快得多？

所以这是我的问题:为什么调用方法比从内存中检索某些东西更快？

使用document.getElementById,我将调用一个可能会或可能不会遍历DOM的方法.至少,我将调用该值的地址.

使用全局范围内的属性,应该可以快速获取,因为它位于某个内存位置.

我在下面包含了jsPerf结果:

我用另一个想法创建了另一个jsPerf: 在窗口对象上显式设置属性

但是,我仍然相信学习为什么可以帮助使用正在发挥作用的力学,这可能会带来一些帮助.

Answer 1

来自HTML5 规范

5.2.4 Window 对象的命名访问

Window 界面支持命名属性。任何时刻支持的属性名称均由以下内容组成（按树顺序排列），忽略后面的重复项：

• 活动文档的任何子浏览上下文的浏览上下文名称，其名称不是空字符串，
• 活动文档中具有非空名称内容属性的所有 a、applet、area、embed、form、frameset、img 和 object 元素的名称内容属性值，以及
• 活动文档中任何具有非空 id 内容属性的 HTML 元素的 id 内容属性值。

因此浏览器可能会遍历 DOM 树来解析命名属性。相反，getElementById()只需要在（比如说）哈希映射中查找 id。

虽然浏览器可以维护该算法的第一个匹配元素的哈希映射，但维护该映射会带来性能损失，而这种损失很少能收回成本。相比之下，浏览器不断地通过 id 查找元素，因此保留 id 映射是值得的。