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, Date.now() ,window.tdiff,
(window.tdiff[0] = Date.now()) && window.tdiff.reduce(fred) );
}
window.onload = function(e){
console.log("window.onload", e, Date.now() ,window.tdiff,
(window.tdiff[1] = Date.now()) && window.tdiff.reduce(fred) );
}
</script>
►Result:
Here is the resulting behavior, observable for Chrome v20 (and probably most current browsers).
document.onload event.onload fires twice when declared inside the <body>, once when declared inside the <head> (where the event then acts as document.onload ).window.onload event handler within the confines of the HTML-<head> element.►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.