JavaScript techniques for determining when the DOM is loaded_javascript techniques

One difficulty with working with HTML DOM documents is that JavaScript can be executed before the DOM is fully loaded, which can cause a lot of potential problems for your code. The rendering and operation sequence of the browser is roughly as follows:

HTML parsing completed
External scripts and style sheets loaded
Scripts are parsed and executed within the document
HTML DOM is fully constructed
Images and external content loading
Web page completes loading

Scripts in the head of the web page and loaded from external files will be executed before the HTML is actually constructed. As mentioned before, this is a critical issue because the scripts executed in these two places cannot access the DOM that does not yet exist. Fortunately, we have several remedies.
Currently, the most commonly used level is to completely wait for the entire page to load before performing DOM operations. This technology only needs to use the load event of the window object to bind a function, which can be triggered after the page is loaded.

Copy code The code is as follows:

addEvent(window, "load", function(){
// do something
});

The simplest operation is the slowest. In the sequential list of the loading process, you will notice that whether the page is loaded or not is completely controlled by the last step. This means that if the page has a lot of pictures, videos, etc., the user may have to log in for a while before JavaScript is executed.
Another progression can be used to listen to DOM loading status, probably the most complex (from an implementation perspective), but also the most efficient.
This technology checks whether the HTML DOM document has been loaded with the attributes necessary for execution as quickly as possible without blocking the browser loading. Here are a few key points for checking whether the HTML DOM is available:

document: You need to know whether the DOM document has been loaded. If you check quickly enough, with luck you'll see undefined.
document.getElementsByTagName and document.getElementById: Frequently use the document.getElementsByTagName and document.getElementById functions to check the document. When these functions exist, it indicates that the DOM has been loaded.
document.body: As an added bonus, checks if the element has been fully loaded. Theoretically the previous check should already be able to make a judgment, but I found that in some cases it's still not enough.
Using these checks is enough to determine whether the DOM is available ("sufficient" here means that there may be a certain millisecond time difference). This method has few flaws. Using the aforementioned checks alone, the script should run relatively well in modern browsers. However, more recently (2008?) Firefox implemented caching improvements such that the window load event can actually fire before the script can check whether the DOM is available. In order to take advantage of this, I also attached checks to the window loading event in order to achieve faster execution speed.

Finally, the domReady function collects references to all functions that need to be executed when the DOM is available. Once the DOM is considered available, these references are called and executed one by one in sequence.

Copy code The code is as follows:

// The function that monitors whether the DOM is available
function domReady(f) {
// If the DOM has been loaded, Mashan executes the function
if(domReady.done) return f();

// If we have added a function
if(domReady.timer) {
// Assume it is in the list of functions to be executed
domReady.ready.push(f);
} else {
// Bind the page after loading An event in case it completes first.
addEvent(window, "load", isDOMReady);
// Initialize the array of execution functions
domReady.ready = [f];
// Check whether the DOM is available as quickly as possible
domReady.timer = setInterval(isDOMReady, 13);
}
}

// Check whether the DOM is operational
function isDOMReady() {
// If we It can be judged that the DOM is possible, ignore
if(domReady.done) return false;

// Check whether several functions and elements are possible
if(document && document.getElementsByTagName && document.getElementById && document.body) {
// If available, we stop checking
clearInterval(domReady.timer);
domReady.timer = null;

// Execute all waiting functions
for(var i = 0; i < domReady.ready.length; i ) {
domReady.ready[i]();
// Record that we have finished here
domReady.ready = null;
domReady.done = true;
}
}
}

Now let’s see how it is performed in an HTML document. Assume that the domReady function has been written to an external file named domready.js

Copy the code The code is as follows:

<script> <br>domReady(function(){ <br>alert("The DOM is loaded!"); <br>// do something <br>}); <br></script>

Testing DOM Loading