Asynchronous script loading
Problem:
<body> the large script at the end of the tag allows the user to see only static pages, where the original rendering should be empty;
Solution:
Divide and conquer the script;
The script that makes the page look good and better is loaded immediately, and the script that is loaded later can be loaded later.
The Async/defer property of HTML5
? <script label >
Typical and non-blocking
Ideally, the script should be loaded at the same time as the document is loaded without affecting the rendering of the DOM.
This allows the script to run once the document is ready because the script has been loaded in the order of <script> tags.
Most browsers support a simple solution:
Put a delay script in the
<script defer src = "deferredscript.js" >
Defer property: Start loading the script right away, but wait until the document is ready and the running defer script finishes before you run it.
Insufficient: Not all browsers support defer, so using defer should encapsulate all deferred scripting code in the $ (document) For example jquery. Ready.
Full parallelization of scripts
Async Property
Scripts run in any order, as long as the JavaScript engine is available to run immediately, whether the document is ready or not.
→ For standalone scripts, asynchronous scripting is a good way to improve performance;
In browsers that support both defer and async, async overwrites defer if the script properties defer and AYSNC are used.
Programmable script loading
Browser API-level approach:
Generate an AJAX request and use the Eval function to handle the response;
Inserts <script> tags into the DOM.
Conditional loading of Yepnope
Yepnope is a simple, lightweight script-loading library designed to serve the most common dynamic script loads.
Yepnope ({
Load: ' Xx.js ',
Callback:function () {
...
}
});
JavaScript asynchronous Programming (ii) asynchronous script loading