javascript - window.onload vs document.onload

The general idea is that window.onload fires when the document's window is ready for presentation and document.onload fires when the DOM tree (built from the markup code within the document) is completed.

Ideally, subscribing to DOM-tree events, allows offscreen-manipulations through Javascript, incurring almost no CPU load. Contrarily, window.onload can take a while to fire, when multiple external resources have yet to be requested, parsed and loaded.

►Test scenario:

To observe the difference and how your browser of choice implements the aforementioned event handlers, simply insert the following code within your document's - <body>- tag.

<script language="javascript">
window.tdiff = []; fred = function(a,b){return a-b;};
window.document.onload = function(e){ 
    console.log("document.onload", e, ,window.tdiff,  
    (window.tdiff[0] = && window.tdiff.reduce(fred) ); 
window.onload = function(e){ 
    console.log("window.onload", e, ,window.tdiff, 
    (window.tdiff[1] = && window.tdiff.reduce(fred) ); 


Here is the resulting behavior, observable for Chrome v20 (and probably most current browsers).

►Example Project:

The code above is taken from this project's codebase (index.html and keyboarder.js).

For a list of event handlers of the window object, please refer to the MDN documentation.