摘要：，，

When we want to insert a script into a web page, the standard way is to use the script tag(i.e.

hello world

The console output:

script1 is running at 1496747869008
script1.js:4 script1 element null
script1.js:8 script1 finishes running at 1496747870008
script2.js:2 script2 is running at 1496747870009
script2.js:4 script2 element null
script2.js:8 script2 finishes running at 1496747872009

Conclusion:

When we open the html in the browser, we can notice the delay of page load. The page goes blank before it renders correctly. This is due to the fact that the running of the two scripts blocks the DOM rendering.

When scripts are running, they are not able to fetch the DOM element (i.e. document.getElementById("load-experiment") being null). This is because scripts are run before DOM is rendered.

Scripts themselves are blocking each other. They are run in the order specified in the html. Script2 is run after script1 finishes running.

This is the suggestion from the Rule 6 of the book High Performance Web Sites.

    
        
    
    
        
 hello world 
        
        
    

The console output:

script1 is running at 1496751597679
script1.js:4 script1 element 
​ hello world ​
​
script1.js:8 script1 finishes running at 1496751598679
script2.js:2 script2 is running at 1496751598680
script2.js:4 script2 element 
​ hello world ​
​
script2.js:8 script2 finishes running at 1496751600680

Conclusion:

No page delay and blank page when opening the page in browser, as scripts are put/run after the DOM is ready.

Scripts can correctly fetch DOM elements.

Scripts themselves are blocking each other, as the same as the first example.

However, puting all scripts at the bottom of body sometimes doesn"t fit in some specific real life cases. For example, if we aim to calculate the ATF[https://en.wikipedia.org/wiki...] of a page, we can"t simple wait for the DOM to render. We have to load and run some scripts beforehand and then fire the ATF marker when the ATF is ready, which is definitely before DOM is ready for web pages with scrolling content. Therefore, it seems reasonable to come out with the next solution.

Put scripts that needs pre-running at head and others at the bottom of body. E.g.

The main disadvantage of putting scripts at the bottom of body is that the scripts will only be retrieved/loaded after the DOM is rendered. As we said, retrieving/loading the script content is NON-BLOCKING while running the script content is the BLOCKING part. We can improve the web performance if we can retrieve/load the scripts while the DOM is rendering, rather than wait for the DOM to complete rendering. This works pretty well especially when the scripts are large. This is why defer is introduced. defer loads the scripts simultaneously but only runs the scripts after the DOM is ready.

    
        
        
        
    
    
        
 hello world 
    

The console output:

script1 is running at 1496760312686
script1.js:4 script1 element 
​ hello world ​
​
script1.js:8 script1 finishes running at 1496760313686
script2.js:2 script2 is running at 1496760313686
script2.js:4 script2 element 
​ hello world ​
​
script2.js:8 script2 finishes running at 1496760315686

Conclusion:

The result is the same as putting scripts at the bottom of body. We can conclude from the result that the scripts are run after the DOM is ready as we can indeed fetch the DOM elements.

Even the defered scripts follow the order rule specified in html, script1 is run after script2.

Web pages often contain some add-on features which are strictly independently and NOT must-to-have, such as the comment and chat functionalities on some pages. As the features are independent, they don"t have the running order restriction. In this case, we can use async

    
        
    
    
        
 hello world 
        
        
    

We can observe different console outputs when we refresh the page:

The running order of script1 and script2 varies

The result of fetching DOM element is inconsistent

As async scripts don"t guarantee the running order, this is often the source of potential hidden bugs. Have a second thought before using async and mare sure these scripts are strictly independent.

The general rule to import script is:

 
     
        
         
     
    
        
        
 hello world 
        
        
        
    

Code Sample

Async JavaScript

High Performance Web Sites

If you benefit from this Repo，Please「Star 」to Support.

If you want to follow the latest news/articles for the series of reading notes, Please 「Watch」to Subscribe.