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

时间:2015-06-01 22:49:02

标签: javascript html dom

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

注意到在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以查看好处:enter link description here

我的惊喜是使用document.getElementById()要快得多?

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

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

使用全局范围内的属性,该属性应该在放置在某个内存位置时快速可用。

我在下面包含了jsPerf结果: enter image description here

我用另一个想法创建了另一个jsPerf: explicitly setting a property on the window object

然而,我仍然相信学习为什么可以帮助使用正在发挥作用的机制,这可能会带来一些帮助。

1 个答案:

答案 0 :(得分:2)

来自HTML5 spec

  

5.2.4 Window对象的命名访问

     

Window界面支持命名属性。支持的属性   任何时刻的名称都包含以下内容,按树顺序忽略   稍后重复:

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

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

虽然浏览器可以维护该算法的第一个匹配元素的哈希映射,但维护该映射会产生很少为自己付出代价的性能损失。相比之下,浏览器不断地通过id来查找元素,因此保留id映射是值得的。