Javascript 对象成员访问答案

【问题标题】：Javascripts Object member accessJavascript 对象成员访问
【发布时间】：2011-04-07 13:35:14
【问题描述】：

我想知道对象成员的访问时间。更准确地说，我正在对window 对象的访问时间进行基准测试。我相信我可以自己解释这里的大多数行为，但听一些 cmets 的话我会感觉更好。

用例：不同属性的不同访问时间？

我在 Firefox 3.6.8 (windows) 上进行基准测试，简单的测量代码如下所示：

var loop = 100000;

console.time('bench');
while(loop--){
   if(window.JSON)
      var foo = 0;
}
console.timeEnd('bench');

第一个奇怪的事情是，它使我正在查找的属性有所不同。例如，window.JSON 似乎比window.localStorage 访问更快。还有其他属性/方法可以更快地访问。
由于ECMA-262 Language Specification 中没有规范或定义，对象中必须有哪些顺序键，我猜每个浏览器供应商都实现了自己的逻辑，其中keys 的顺序存储在内存中。
这可以解释这种行为吗？比如，JSON 是最早的键之一，而location 更多的是在最后？（至少在我的测试环境中）

我注意到的另一件事是，调用if(JSON) 比if(window.JSON) 稍快。如果我们因为可能的引用错误而忘记了您总是应该进行第二次调用，那么这些调用应该具有相同的访问时间。我知道 nested member lookups 上的 ECMAscripts 行为（每次遇到点时，嵌套成员都会导致 Javascript 引擎通过对象成员解析），所以 window.location.href 必须更慢比location.href，但在这种情况下..JSON 和window.JSON 之间有区别吗？

要结束这一点，了解window 对象是否拥有特定属性/方法的最快方法是使用IN 运算符。对于上述示例，这大约快 10 倍。

【问题讨论】：

标签： javascript performance browser

【解决方案1】：

您注意到的第一件奇怪的事情可能与浏览器如何实现 host objects 有关。

localStorage 是一个宿主对象，由环境提供，而JSON 是一个由ECMAScript 提供的built-in object。

尝试解析另一个内置函数，您将获得与JSON 大致相同的结果。

现在，JSON 与 window.JSON 的区别：

window 只是全局对象上指向自身的一个属性，当您访问 window 标识符时，名称解析过程会进行查找。

基本参考：

JSON;

只涉及一个标识符查找（在作用域链中），并且：

window.JSON;

涉及标识符查找 (window) 和属性查找 (window.JSON)。

【讨论】：

host object 的概念是否也解释了为什么window.outerWidth 上的访问时间是window.setTimeout 上的访问时间的三倍（例如）？
@jAndy，outerWidth 和 setTimeout 都可以被视为主机对象，outerWidth 大概是作为 访问器属性实现的，当您访问它时执行了一个 getter 函数，由于它与 DOM 布局有关，因此必须重新计算当前值（以像素为单位的测量值），导致 reflow（参见：1 2 3 )，而setTimeout 只是一个函数对象。
很有趣，我忘记了即使在访问计算样式时也会发生回流的事实。无论如何，在 Nicholas 的博客中，Dean Edwards 对此表示怀疑。但是话又说回来，如果我的测量结果是正确的，那么访问outerWidth（例如）时回流似乎是一个最终事实。可能也依赖于浏览器？还是谢谢！