Skip to main content

Page Lifecycle

Document / Resource Loading: Page Lifecycle

What are the three crucial events in the lifecycle of an HTML page?​

View Answer:
Interview Response: The lifecycle of an HTML page has three critical events, including the DOMContentLoaded, load, and beforeunload/unload. DOMContentLoaded occurs when the browser fully loads HTML, and the DOM tree completely builds, but external resources like pictures ‹img› and stylesheets may not yet have loaded. The load is not only HTML is loaded but also all the external resources: images, styles, and others. The beforeunload/unload state happens when the user is leaving the page.

How are the DOMContentLoaded, load, beforeunload/unload events useful?​

View Answer:
Interview Response: Each HTML lifecycle event is helpful in its way. The DOMContentLoaded event is when the DOM is ready, so the handler can lookup DOM nodes and initialize the interface. The load event is when external resources are loaded, so styles are applied and image sizes are known. The beforeunload event occurs when the user is leaving, we can check if the user saved the changes and ask them whether they want to leave. The unload event occurs when the user has almost left, but we still can initiate some operations, such as sending out statistics.

On what object does the DOMContentLoaded event occur?​

View Answer:
Interview Response: The DOMContentLoaded event happens on the document object, and we must use addEventListener to catch it. We should note a few peculiarities when we try to solicit information before the page is completely loaded, like image sizes, and the DOM loads first and then images and styles.

Code Example:

<script>
  function ready() {
    alert('DOM is ready');

    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener('DOMContentLoaded', ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0" />

What happens when the browser processes a document and comes across a <script> tag?​

View Answer:
Interview Response: When the browser is processing an HTML page and encounters a ‹script› tag, it must execute it before continuing to create the DOM. This measure is a precaution since scripts may seek to change the DOM and even document.write into it, forcing DOMContentLoaded to wait. As a result, DOMContentLoaded occurs after such scripts.

Are there any exceptions to script blocking of the DOMContentLoaded event?​

View Answer:
Interview Response: Yes, there are two exceptions to the rule. Scripts with the async attribute do not block DOMContentLoaded event. Scripts generate dynamically with the `document.createElement('script')` method and then added to the webpage; don’t block this event.

Do external style sheets influence or affect the DOM?​

View Answer:
Interview Response: External style sheets do not affect DOM, so DOMContentLoaded does not wait for them. But there is a pitfall. If we have a script after the style, that script must wait until the stylesheet loads. This behavior happens because the script may need coordinates and other style-dependent properties of elements. Naturally, it must wait for styles to load. As DOMContentLoaded waits for scripts, it now waits for styles before them.

Code Example:

<link type="text/css" rel="stylesheet" href="style.css" />
<script>
  // the script doesn't not execute until the stylesheet is loaded
  alert(getComputedStyle(document.body).marginTop);
</script>

How does the built-in browser autofill interact with the DOMContentLoaded event?​

View Answer:
Interview Response: Firefox, Chrome, and Opera autofill forms on DOMContentLoaded. For instance, if the page has a form with login and password, and the browser remembered the values, then on DOMContentLoaded it may try to autofill them (if approved by the user). So if long-loading scripts postpone DOMContentLoaded, then autofill also awaits until the DOMContentLoaded event.

Can you explain how the load event behaves via the onload property?​

View Answer:
Interview Response: The load event on the window object triggers when the whole page is loaded, including styles, images, and other resources. This event is available via the onload property.

Code Example:

<script>
  window.onload = function () {
    // same as window.addEventListener('load', (event) => {
    alert('Page loaded');

    // image is loaded at this time
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  };
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0" />

What event is triggered when a user leaves the browser page?​

View Answer:
Interview Response: When a visitor leaves the page, the unload event triggers on the window.

Is there a reason we should avoid using unload and beforeunload in conjunction with Navigator.sendBeacon method?​

View Answer:
Interview Response: In many situations, especially on mobile devices, the browser does not fire the unload, beforeunload, or pagehide events. For example, these events do not fire in the following situations. The user loads the page and interacts with it. When they complete, they switch to a different app instead of closing the tab. Later, they close the browser app using the phone's app manager. Additionally, the unload event is incompatible with modern browsers' back/forward cache (bfcache). Using the unload event in conjunction with the sendBeacon method is not recommended.

What happens if we set the DOMContentLoaded handler after the document is loaded?​

View Answer:
Interview Response: Naturally, it never runs because the page has already loaded.

Is there a way to find the document loading state?​

View Answer:
Interview Response: Yes, we can check the loading state by invoking the `document.readyState` property. The `document.readyState` property describes the loading state of the document. When the value of this property changes, a readystatechange event fires on the document object.

Syntax: let string = document.readyState;

What are the three possible values of the readyState?​

View Answer:
Interview Response: The readyState can be one of three possible values, including the loading, interactive, and complete states. The “loading state” is relative to the page still loading. The “interactive state” is when the document has finished loading and parses, but sub-resources such as scripts, images, stylesheets, and frames are still loading. The “complete state” happens when the document and sub-resources have finished loading, and the state indicates that the load event is about to fire.

Code Example:

Syntax: let string = document.readyState;

function work() {
  /*...*/
}

if (document.readyState == 'loading') {
  // still loading, wait for the event
  document.addEventListener('DOMContentLoaded', work);
} else {
  // DOM is ready!
  work();
}