Lifecycle of Webpage (HTML)

Loading and rendering of HTML document in a browser has several stages. In this article we will only look a process of rendering and loading HTML document in a browser and how we can work with it in JS. But here we will not describe the process of receiving an HTML document and additional files from the server.

Stages of rendering and loading HTML document:

1. A DOM tree is formed from the loaded HTML document.
2. Styles are loaded and recognized, CSS Object Model is generated
3. Forming of The Rendering Tree. Render Tree - duplicates the DOM, but without invisible elements. Describes the visual representation of the DOM.
4. Calculation of positions on pages for elements (Layout)
5. Rendering colors of elements (Paint)

The Render Tree created from DOM and CSS Object Model. The Render Tree is necessary to determine exactly what needs to draw and in what order. The construction of a Render Tree goes something like this: the parser start from the root element and goes through all visible elements. For each visible element the parser finds the corresponding CSS rule from the CSS Object Model.

Layout is a recursive process of determining the position and size of elements from the Render Tree. It starts from the root Render Object and goes recursively down the entire tree hierarchy, calculating the geometric dimensions of the child render objects.

The root element has position (0,0) and its dimensions are equal to the size of the viewport.

Paint is the stage where the monitor pixels are filled with the color specified in the properties of the render object.

And now let look how we can work with this process in JS.

In JS the life cycle of an HTML page has three important events:

• DOMContentLoaded
• load
• beforeunload/unload

DOMContentLoaded - The HTML has been fully loaded by the browser and the DOM tree has been built. But resources such as images and styles may not be loaded yet. At this stage, you can work with the DOM tree, but there is no way to work with images yet. You can trigger a specific event at this stage.

document.addEventListener('DOMContentLoaded', myCallback);

load - the browser has completely loaded the page with all its resources. At this stage, you can freely work with all elements of the DOM tree and page resources, such as images, styles, and so on.

To be sure that the page is completely ready, you can use the following handler.

window.onload = function() {...}

beforeunload/unload - the user leaves the page. When a visitor leaves the page, an unload event is fired on the window object.

window.addEventListener('unload', myCallback);

There is another way to check the loading status of a document. The document.readyState property shows us the current loading state.

There are three possible values:
"loading" – the document is being loaded.
"interactive" – the document has been completely read.
"complete" – The document has been completely read and all resources (such as images) have also been downloaded.

You can also set a handler to change the document loading state.

document.addEventListener('readystatechange', myCallback);

Also, it is possible to check the status of the connection to the network.

An event is generated when page disconnect from the network. When page connect to the network, an event is also generated. We can subscribe to this events:

window.addEventListener('offline', myCallback);
window.addEventListener('online', myCallback);