Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

onload=function vs window.onload=function

Are there any real advantages to using window.onload=function(){}; over onload=function(){}; ? I know window.onload looks more proper, but that's not a good reason for me to choose it, especially that it's longer/slower than onload.

After some time-consuming searches and tests, those 2 were the only 2 browser compatible methods, the tests (on relatively new Chrome/Firefox versions, and IE from 5.5 to 9) included:

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

I could find this article which is one of the most suited articles to my question:

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

It states that the strict mode of ECMA-262 5th edition ("use strict"; which I don't plan to use in my project) could finally cause some browser incompatibility to onload (ReferenceError in Firefox and Opera).

So the question is: are there any real disadvantages related to using the direct onload assignment other than the "use strict;" one? I need infos not some unexplained opinions.

Thanks

Note: I did search before asking this question (which looks a bit classic I know), the closest questions I could find were about window.onload vs <body onload="">, other alternatives to window.onload, etc.

Edit: I've created this test case onload vs window.onload, which proves how faster is onload. I would really go for this kind of micro optimisations because why not? They can be cool sometimes.

like image 212
heytools Avatar asked Oct 04 '22 15:10

heytools


2 Answers

Both are the same... When you call onload by itself then javascript assumes that it's a global property which is a property of the window object. So basically if you don't specifically say it's window.onload then the javascript engine will do it for you.

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

So as long as you don't care about strict mode you shouldn't have any problem with modern browsers. However it's considered better to use the full window.onload instead of just onload. You're not gaining much by not typing the extra 7 characters.

like image 117
Pete D Avatar answered Oct 12 '22 12:10

Pete D


All global functions and variables are inside window object. So when you are using onload you are using window.onload.

When calling something inside a namespace you have a performance cost: it has to get the object window and then the property onload.

When calling a global variable without window you have the risk that it is redefined inside its scope:

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

In this example onload alerts "foo";

So you asked are there any real disadvantages related to using the direct onload assignment:

The onload may be redefined and the code may not work.

like image 35
Kaizo Avatar answered Oct 12 '22 12:10

Kaizo