Viewport vs Window Vs Document
Things are different when your page is bigger than your screen.
Viewport is the rectangle area where things are visible to you. The document can be larger than that and you'll see scrollbars if so.
As for your second question: window.onload vs document.onload
Here is a summary.
Viewport: It is your device screen.
Window: It is your browser window. The window can be as big as viewport or smaller.
Document: It is the webpage. It can be bigger than viewport or even bigger than window.
Notes: Some websites are for not created for mobiles. Hence the webpage/document is much bigger than the mobile viewport and you have to swipe to see the parts that spill outside the screen. On a desktop, you can make the window of your browser smaller or same as the viewport/monitor.
document:
document is an object in JavaScript that represents the DOM (Document Object Model) of your page. The document object is a representation of your entire page structure (all HTML elements etc.), so this:
document.documentElement.clientHeight
document.documentElement.clientWidth
should be giving you the width of your <html> element
viewport:
using this:
window.innerWidth
window.innerHeight
gives you the actual visible (physical) dimensions of the window inside your browser.
window.onLoad
window.onload (a.k.a body.onload) gets fired after the main HTML, all CSS, all images and all other resources have been loaded and rendered.
document.onLoad
is called when the DOM is ready which can be prior to when images and other external content are loaded.
I think the best explanation is provided by MDN here that I copied/pasted some important parts down below:
The document element's Element.clientWidth is the inner width of a document in CSS pixels, including padding (but not borders, margins, or vertical scrollbars, if present). This is the viewport width.
The Window.innerWidth is the width, in CSS pixels, of the browser window viewport including, if rendered, the vertical scrollbar.
The Window.outerWidth is the width of the outside of the browser window including all the window chrome.