JavaScript page Lifecycle

Page loading is splitted in few phases that we can track by listening on different events. This events can be useful for different cases (for improving page performance or to handle and understand some specific cases or issues that can happen). In the process of page loading, there are different events we can use: - DOMContentLoaded, - Document: readystatechange event - Window: load event - Window:before unload and unload event The DOMContentLoaded event happens when the initial HTML document has been fully parsed and loaded, without waiting for external resources (stylesheets, images, subframes) to be loaded. This event is good moment to apply JavaSript to elements. When the browser processes an HTML-document and comes across a <script> tag, it needs to execute it before continuing building the DOM. If we want to prevent script blocking dom content load, or if we need to have whole dom before script is executed, we should add scripts at bottom of the page. Scripts with ‘async’ attribute and scripts inserted with document.createScript are exceptions (they will not block loading of DOM content). In opposite to scripts, external stylesheet will not stop dom content in loading. For example, Firefox, Chrome and Opera use this DOMContentLoaded event to autofill forms. So if DOMContentLoaded is postponed by long-loading scripts, then autofill also awaits. The readystatechange event is fired when the readyState attribute of a document has changed. That attribute represents the loading state of the document. The readyState of a document can be one of following: loading - the document is still loading, interactive - the document is parsed and loaded, but sub-resources are still loading, complete - the document and all sub-resources have finished loading. Window: load event This event is fired when the whole page and resources are loaded. This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources. This is a good moment to add JavaScript logic that we want to apply on internal resources (for example on images) because they are also fully loaded and we can get their properties and operate with them. To summarise, order of this events gets triggered is: - Ready state is : loading - readystate changed to : interactive - DOMContentLoaded - readystate changed to: complete - load After those events, we can use next two: Window: beforeunload event - in this phase, the document is still visible and the event is still cancelable We can use this event to ask user does he save all changes and does he really want to leave the page. Window: unload event - The unload event is fired when the document or a child resource is being unloaded. In this moment it is possible to send analytics (We can send out a network request with navigator.sendBeacon) Appart from those events, there are many other useful events. The full list you can find at https://developer.mozilla.org/en-US/docs/Web/Events.