Javascript loading and execution-performance improvement_javascript skills

The blocking nature of Js
The performance issue of Javascript in the browser may be the most important usability issue
The blocking nature of Js The browser uses a single process to handle the UI process and the execution of Js
Whether it is embedded or external, download and execute immediately because it may modify the page

The concept of page life cycle
The download time and executing time
Nothing will be output until the script and link body are loaded in the head, so you will see a blank page

Copy code The code is as follows:

Organize the script

Goal minimize delay time
Problem
Referring to multiple script files and embedding multiple script tagsEach http request will bring performance overheadThe script immediately following the link is an error. It will wait for the css to be loaded in order to obtain The most accurate depiction
Conclusion: Reduce the number of script tags
Merge multiple js files into one, packaging tool
Yahoo’s merge processor


Non-blocking script

js tends to block certain processes of the browser, such as http request processing and interface updates. This is the most important performance issue. Therefore, we need to reduce the size of js files and limit the number of http requests
However, there is a contradiction between rich functions and the amount of code. Merging it into a single file will lock the browser for a long time, so we need to gradually load the javascript files
Key points: Load the javascript file after the page is loaded
1. Delay loading script

defer attribute
If the js file to be downloaded will not perform dom operation, then defer The attribute is very useful. It allows files to be downloaded in parallel. It will not be executed immediately, but will be executed after the onload event. It is suitable for any script tag
2. Dynamic loading script
A function


Copy code

The code is as follows: function loadScript(url,callback){ var script = document.createElement('script'); script.type = 'text/javascript';

if(script.readyState) { //IE

script.onreadyStatechange = function() {
　if(script.readyState == 'loaded' || script.readyState == 'complete') {
script.onreadyStatechange = null;
　callback();
}
} else {
script.onload = function(){
callback();
}
}
}


Pay attention to browser compatibility here. Delete the event,
If there are multiple files that need to be loaded like this, you can

Copy the code

The code is as follows: loadScript('file1.js', function(){ loadScript('file2.js',function(){ })

});

3. XHR script injection

Copy code

The code is as follows: var xhr = new XMLHttpRequest(); xhr.open('get','file1.js',true); xhr.onreadystatechange= function(){

　if(xhr.readyState == 4) {

　if(xhr.status >= 200 && xhr.status var oScript = document.createElement('script');
oScript.text = xhr.responseText;
Document.body.appendChild(oScript);
}
}
}


304 indicates that fetching text from cache will use ajax Put the content into text


Its advantages

Good compatibility, asynchronous, Disadvantages: cannot expand domain and cannot retrieve content from CDN