What is the basic difference between Windows loaded vs Dom ready?

In the context of web development, there is a difference between Windows loaded vs Dom ready. The “Dom Ready” event usually refers to the document object model (DOM) of a particular web page that has been wholly constructed and therefore is ready for the process of manipulation by the route of JavaScript. On the other hand, the “windows loaded” refers to all resources including images, stylesheets, scripts, etc are in the web page, including the DOM, that have finished loading.

Here is the difference given in terms of coding analogy by using JavaScript and jQuery which illustrates the difference and even shows how these can be utilized for the process of optimization of website performance:

// DOM Ready event using vanilla JavaScript
Document.addEventListener(‘DOMContentLoaded’, function() {
    // This code runs when the DOM is fully loaded and ready for manipulation
    // You can perform operations on the DOM elements here
});
// Window Loaded event using vanilla JavaScript

Window.addEventListener(‘load’, function() {
    // This code runs when the entire page, including all resources, has finished loading
    // You can perform additional operations that require all resources to be loaded here
});