【问题标题】:onload=function vs window.onload=functiononload=function vs window.onload=function
【发布时间】:2013-07-04 15:14:24
【问题描述】:

使用 window.onload=function(){}; 有什么真正的优势吗?超过 onload=function(){}; ?我知道 window.onload 看起来更合适,但这不是我选择它的好理由,尤其是它比 onload 更长/更慢。

经过一些耗时的搜索和测试,这 2 个是仅有的 2 个兼容浏览器的方法,测试(在相对较新的 Chrome/Firefox 版本和 5.5 到 9 的 IE 上)包括:

window.onload // works in all tested browsers
onload // works in all tested browsers, faster than window.onload
document.onreadystatechange // works twice in some browsers, once in some others, could be confusing
window.onpageshow // works in chrome and firefox, not in IE
window.onreadystatechange // doesn't work
document.onload // doesn't work
document.onpageshow // doesn't work
window.document.onload // doesn't work

我可以找到这篇文章,这是最适合我的问题的文章之一:

http://perfectionkills.com/onloadfunction-considered-harmful/

它指出 ECMA-262 5th edition 的严格模式("use strict"; 我不打算在我的项目中使用)最终可能导致某些浏览器不兼容加载(Firefox 中的 ReferenceError和歌剧)。

所以问题是:除了“use strict;”之外,使用直接加载分配是否有任何真正的缺点?一?我需要信息而不是一些无法解释的意见。

谢谢

注意:我在问这个问题之前进行了搜索(我知道这看起来有点经典),我能找到的最接近的问题是关于 window.onload 与 window.onload 的其他替代方案

编辑:我创建了这个测试用例onload vs window.onload,它证明了加载速度有多快。我真的会进行这种微优化,因为为什么不呢?它们有时很酷。

【问题讨论】:

  • onload 和 window.onload 是我所知道的同义词
  • "onload ... faster than window.onload" - 你如何测试这个?我很难认为您甚至可以衡量两者之间的性能差异。实际代码中肯定没有性能差异。
  • 嗯,我的意思是 分配给 onload 更快,我有时在不同的浏览器上尝试在 jsperf 上,结果根本没有争议。这是一个新的测试用例jsperf.com/onload-vs-window-onload 我知道它仍然被认为是一种微优化,但它也是你可以学习一次并始终应用的东西
  • 您的新测试似乎没有测试任何东西(您只是在引用该属性),自然这两个测试对我来说完全返回相同的结果(在 Chrome 28 中)。但是,正如您在上面所说,赋值操作确实会产生不同的结果,onload 在这方面似乎比window.onload 稍微快一些。 jsperf.com/onload-vs-window-onload/2 虽然,这是一个 micro^2 优化。 :)
  • 我的错,我发错链接jsperf.com/onload-window-onload

标签: javascript onload


【解决方案1】:

两者是相同的...当您自己调用 onload 时,javascript 假定它是一个全局属性,它是窗口对象的一个​​属性。所以基本上如果你没有特别说它是 window.onload 那么javascript引擎会为你做。

if (onload === window.onload) {
   alert("it's the same");  //true
}

因此,只要您不关心严格模式,现代浏览器就不会有任何问题。但是,使用完整的 window.onload 而不是仅使用 onload 会更好。通过不输入额外的 7 个字符,您不会获得太多收益。

【讨论】:

  • 是的,我需要对那个“但是”做出解释。并且不需要 7 个字符的句子,我已经说过 onload 更快,而不仅仅是更短。关于您的回答,请参阅我在 Kaizo 回答下的第一条评论。
  • 它被认为是更好的做法(使用window.onload),因为它避免了歧义,更易于阅读,从而使您的代码更便携且不易出错。你可能会毫不犹豫地使用window.top,但同样的原则也适用。
【解决方案2】:

所有全局函数和变量都在窗口对象内。因此,当您使用onload 时,您使用的是window.onload

在命名空间内调用某些内容时,您需要付出性能代价:它必须先获取对象窗口,然后再获取属性 onload。

在没有窗口的情况下调用全局变量时,您有可能在其范围内重新定义它:

function () {
  var onLoad = function() {alert("foo")};
  function () {
    onLoad();
  }
}

在此示例中,onload 警报“foo”;

所以你问are there any real disadvantages related to using the direct onload assignment

onload 可能被重新定义,代码可能不起作用。

【讨论】:

  • @Kaizo:在上面的代码中,onLoad 需要全部小写才能隐藏全局 onload 属性 - 假设这就是您要演示的内容。
  • @heytools:“一般规则”是什么意思?您的示例似乎突出了浏览器的怪癖,而不是与 Kaizo 的代码有关。 Kaizo 的代码试图表明的是,局部范围内的onload 不一定指全局 onload 属性(即window.onload)——它是模棱两可的。而window.onload 可以。局部onload 变量隐藏作用域链中的全局onload 属性。
  • @w3d 一般规则 = 所有全局函数和变量都在窗口对象内。我知道如何使用 Chrome 并验证 window.onload == onload,但这还不足以断定即使在最旧的浏览器/设备中也是如此。
  • 这就是重点,并非总是如此。当您不在全局范围内时,window.onload 不一定等于 onload。再看看你的例子,这不是浏览器的怪癖,你不应该使用if (globalVar)(如在XMLHttpRequest中),因为当globalVar没有被定义时,这会抛出一个异常,而window.globalVar只是返回undefined.
猜你喜欢
  • 1970-01-01
  • 2011-10-18
  • 2017-06-08
  • 2014-11-16
相关资源
最近更新 更多