Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript
dom
communitycreator

What is the browser readyState document in JavaScript?

Programming Bytes

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

readyState

The readyState property of the document objects denotes the current state of the document (document.readyState tells us the status of the page load). There are 3 different possible states:

  • loading — The document is loadingthe .html file is being downloaded/parsed.
  • interactive — In this state, the DOM is loaded and accessible. However, resources like images, stylesheets, and JavaScript files will not have finished downloading/loading/parsing.
  • complete — The document and all resources (like images/stylesheets have finished loading).

Let’s look at an example. We have a website educative.io, let’s compare the readyState when we type the URL in the browser and hit enter.

1. Loading

In this state, the document is constructing its elementsparsing DOM.

2. Interactive

If the readyState is interactive, then the DOM is loaded, but resources like script, img, and css files will still be downloading. The DOMContentLoaded event is also fired when the readyState changes from loading to interactive. Once the state is interactive, we can access the DOM elements.

3. Complete

When readyState is changed to complete, it means that the document is now parsed and loaded, and all known additional resources like CSS, images, and JS have also been parsed and loaded.

readyStateChange event

To detect the state change, we can add the readyStateChange event listener to the document.

document.addEventListener('readystatechange', function(ev) {
    console.log(document.readyState)
});

Example

Below is an example that shows how to print the ready state in the console.

Console

RELATED TAGS

javascript
dom
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring