Recently review combs the knowledge reserve since graduation a few years, plan to review step by step from the most original way to the current popular three frame knowledge, do not say much to roll up sleeves.

Before reading, we need to know how scripts and style files are downloaded during page loading. Suppose our page has the following code:

<html>
    <script  type="text/javascript" src="file1.js"/>
    <script  type="text/javascript" src="file2.js"/>
    <script  type="text/javascript" src="file3.js"/>
    <link rel="stylesheet" type="text/css" href="styke.css"/>
</html>
Copy the code

The order of the page loading process will look like this (some browsers now support asynchronous downloading we won’t discuss) :

From the figure, we can see that the first JS is downloaded and executed, and then the second js is downloaded and executed, and so on. When there are too many external chain resources, the screen will be blank when the user opens the page, giving the customer a bad perception. In the optimization of pre-development projects, we usually introduce resource files like this because script download execution blocks page loading

<html>
    <link rel="stylesheet" type="text/css" href="styke.css"/> <body> ..... Omit page content <scripttype="text/javascript" src="file1.js"/>
    <script  type="text/javascript" src="file2.js"/>
    <script  type="text/javascript" src="file3.js"/>
    </body>
</html>
Copy the code

But in the past project development process, we often introduce a lot of external chain JS files to make the page interactive stronger, so long ago we mainly do this: 1: reduce the number of HTTP requests to compress multiple JS files into a JS file download 2: reduce the external chain JS file reference 3: Step by step load the js files you want as the page requires (PS: some browsers can defer by using the defer attribute. This article reviews the knowledge from a dynamic scripting perspective)

So how did we delay the gradual loading of script files in previous development? We all know that when a page encounters a script tag during loading, it stops loading the contents of the tag, so we can consider the following code:

<! ----> scriptSrc file resource path onloadedCallBack after loading the file callbackfunction dymicLoadScript(scriptSrc,onloadedCallback){
    var script = document.createElement("script");
    script.type = "text/javascript"; <! -- -- -- -- > compatible with IEif(script.readyState){
        script.onreadystatechange = function() {if(script.readystate=="loaded" || script=="complete") {<! -- -- -- -- > recycling to monitor function script. The onreadystatechange = null; onloadedCallback(); }}}else{
        script.onload = function(){
            callback()
        }
    }
    script1.src="file1.js; document.getElementBytagName("head")[0].append(script1) } <! DymicLoadScript (file1.js,function(){console.log(");----")})Copy the code

In addition to this we can also use the XMLHttpRequest object to load our JS code. The simple code is as follows

<! ----> scriptSrc file resource path onloadedCallBack after loading the file callbackfunctiondymicLoadScript(scriptSrc,onloadedCallback){ var xhr = new XMLHttpRequest(); <! ----> Load js file xhr.open("get",scriptSrc,true):
    xhr.onreadyStatechange=function() {if(xhr.readyState==4 && (xhr.status>=200 && xhr.status<300 || xhr.status == 304) ){
               var script = document.createElement("script");
                script.type = "text/javascript"; script.text = xhr.responseText; . The callback function is similar to omit... document.body.appendChild(script); }}} <! DymicLoadScript (file1.js,function(){
     console.log("--")})Copy the code

Then there is the knowledge of page performance optimization that was often used in early development. The next article will talk about redraw and reflux. Take notes.