所以这是我的问题:为什么调用方法比从内存中检索某些东西更快?
注意到在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结果:
我用另一个想法创建了另一个jsPerf: explicitly setting a property on the window object
然而,我仍然相信学习为什么可以帮助使用正在发挥作用的机制,这可能会带来一些帮助。
答案 0 :(得分:2)
5.2.4 Window对象的命名访问
Window界面支持命名属性。支持的属性 任何时刻的名称都包含以下内容,按树顺序忽略 稍后重复:
- 活动文档的任何子浏览上下文的浏览上下文名称,其名称不是空字符串,
- 活动文档中具有非空名称内容属性的所有a,applet,area,embed,form,frameset,img和object元素的name content属性的值,并且
- 活动文档中具有非空id内容属性的任何HTML元素的id内容属性的值。
因此浏览器可能会遍历DOM树来解析命名属性。相比之下,getElementById()
只需要在(例如)哈希映射中查找id。
虽然浏览器可以维护该算法的第一个匹配元素的哈希映射,但维护该映射会产生很少为自己付出代价的性能损失。相比之下,浏览器不断地通过id来查找元素,因此保留id映射是值得的。