Javascript loading and execution-Performance Improvement

Javascript obstruction
The performance of Javascript in browsers may be the most important availability issue.
Javascript's obstructive browser uses a single process to process the UI process and Js execution
Whether embedded or external, download and execute it immediately because it may modify the page

Concept of page Lifecycle
The waterfall graph shows the download time and executing time.
Adding a script and link body to the head does not output anything before loading, so a blank page is displayed.
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Document. write ("The date is" + (new Date (). toDateString ()));
</Script>

When a page arrives at a script, it does not know what the script will do, so it will be blocked. Wait for it to execute
Ie8 and other browsers can download multiple js resources in parallel, but it still has an impact on image download.
Conclusion: load the script at the bottom.

Organization script
Minimum delay of the target
Problem
Reference multiple script files embedded with multiple script tags
Each http request will incur performance overhead
The script followed by the link is an error. It will wait for the css to be loaded to obtain the most accurate description.
Conclusion: Reduce the number of script tags
Combine multiple js files into one package Tool
Yahoo merge Processor

Non-blocking scripts
Js tends to block some browser processing processes, such as http request processing and interface updates. This is the most important performance issue. Therefore, we need to reduce the js file size and limit the number of http requests.
However, the contradiction between the rich features and the amount of code is that merging them into a single file will lock the browser for a long time, so we need to gradually load javascript files
Important: Load javascript files after page loading

1. Delayed loading script
Defer attributes
If the js file to be downloaded does not perform dom operations, the defer attribute is very useful. It allows parallel file downloads and does not execute immediately. Instead, it will be executed after the onload event, applicable to any script tag
2. dynamically load scripts
One function
Copy codeThe 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 and delete events,
If multiple files need to be loaded in this way, you can
Copy codeThe Code is as follows:
LoadScript ('file1. js', function (){
LoadScript ('file2. js', function (){
})
});

3. XHR Script Injection
Copy codeThe 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 <= 300 | xhr. status = 304 ){
Var oScript = document. createElement ('script ');
OScript. text = xhr. responseText;
Document. body. appendChild (oScript );
}
}
}

304 indicates that ajax content is put into text from the cache

Its advantages
Good compatibility and Asynchronization. disadvantage: content cannot be obtained from cdn due to domain Expansion