Explain the Difference Between DOMContentLoaded, load, beforeunload and unload

We all know that web pages are constructed after a browser loads and parses HTML. After the browser parses the HTML, it will construct a DOM tree. Through the DOM tree, developers can easily manipulate DOM nodes through JavaScript, so that the web page can not only be viewed, but also be interacted with. Web pages and DOM also have a lifecycle that we are familiar with.

For example, DOMContentLoaded is used by many developers. In a JavaScript interview, if the interviewer wants to test your understanding of the browser lifecycle, he might ask you "What is the difference between DOMContentLoaded and load events?"

How Is the DOMContentLoaded Different From the load Event?

DOMContentLoaded is an event that will be triggered when the DOM is constructed, so it will be fired only when the HTML file is fully loaded and parsed. When it is triggered, CSS style sheets, images, etc. may not be fully loaded. Because many JavaScript scripts can only be used after the DOM nodes are completely created (or there is no way to do operations without DOM nodes), DOMContentLoaded can help developers detect when these JavaScript scripts can be executed.

The load (window.onload) event is triggered only after the HTML file is fully loaded and parsed, and all resources such as CSS style sheets and images are loaded. So it can be understood that the load event will only be triggered when the webpage is completely loaded. Therefore, load will be triggered after DOMContentLoaded. If the JavaScript logic will change styles, images, etc., it will be more suitable to use load instead of DOMContentLoaded.

We can also understand the difference between DOMContentLoaded and load events from another angle. The document object has a readyState attribute (see here), which has three values: one is loading, which means that the HTML file is being parsed; the second is interactive, which means that the HTML file has been read and parsed, and DOMContentLoaded has been triggered, so there is already interaction; the last is complete, it indicates the load event is fired.

What Are the Timing and Function Of beforeunload and unload?

DOMContentLoaded and load events are used to detect the completion of DOM and web page construction, which is at the beginning of the lifecycle; while beforeunload and unload are used to detect the end of the lifecycle, which means that they will be triggered when the web page is about to be closed.

beforeunload (window.onbeforeunload) is triggered before the user leaves the webpage. For example, it will be triggered when a user navigating to another page or closing a tab. Its purpose is to allow developers to do something before the user leaves. A common use case is that before the user leaves a webpage, we can show a pop-up window, asking the user if he really wants to leave. To do so, we can show the pop-up when the beforeunload event is triggered.

As for unload (window.onunload), it will be triggered after leaving or closing the webpage; so its triggering time is after beforeunload. If we are going to have a popup window, we can't use unload because it will be too late. The purpose of unload is usually used for data analytics. It is triggered when the user leaves the webpage, so, with this event, we can know exactly when the user leaves the webpage.