Synchronous loading and asynchronous loading

These days have been busy on the project line problem, encountered a lot of problems, such as asynchronous loading, event bubbling, browser caching. This article is mainly about synchronous loading and asynchronous loading of files.

First of all, I ran into the problem: the project to connect to the Alipay City service, but the Android and iOS settings Alipay navigation bar content is different. Android and iOS are the title of the page to set the content of the navigation bar, but Android support with JS dynamic modification Title,ios is in the page initialization will default to take title as the navigation bar content, initialization with JS dynamic modification is invalid. Alipay provides a set of Alipay navigation Jsapi, need to load two files, I was in the project directly loaded this even file, in the call it provides the method, no problem perfectly set. But then I felt bad about it. I am not a merchant of every output need to set, So I use Navigator.useragent to judge is not in the Alipay client open, in the dynamic add these two JS files, in this there is a problem, you dynamically add JS, immediately execute the method of the inside sometimes there will be errors, that you have not yet loaded successfully executed the method.

Here's what we always say. Synchronous loading and asynchronous loading:

1. Synchronous loading

This is the type of synchronous loading that we usually use most often:

<script src= "Js/jquery.js" ></script>

Synchronous mode, also known as blocking mode, blocks subsequent processing of the browser, stops subsequent parsing, and therefore stops subsequent file loads (such as images), rendering, and code execution.

JS is to be synchronized, because JS may have output document content, modify the DOM, redirection and other behavior, so the default synchronous execution is safe.

The previous general recommendation is to put <script> at the end of the page </body> before, so as to minimize this blocking behavior, but first let the page display.

Simply put: The load of the network timeline is a waterfall model, while the asynchronous loading of the timeline is the concurrency model.

2. Common asynchronous loading (Script DOM Element)

Native method

(function() {
var s = document.createelement (' script ');
S.type = ' Text/javascript ';
S.async = true;
S.SRC = ' js/jquery.js ';
var x = document.getelementsbytagname (' script ') [0];
X.parentnode.insertbefore (S, x);
})();

jquery method

$ ("Head"). Append ("Jquery.js")

Asynchronous loading is also called non-blocking, the browser in the download to execute JS also will continue to follow the page processing.

This approach is to create a SCRIPT element and insert it into the document in the <script> tab of the page, using JS. This is done with non-blocking download JS code.

3. onload Asynchronous loading

(function() {
functionAsync_load () {
vars = document.createelement (' script ');
S.type = ' Text/javascript ';
S.async = true;
S.SRC = ' js/jquery.js ';
varx = document.getElementsByTagName (' script ') [0];
X.parentnode.insertbefore (S, x);
}
if(window.attachevent)
Window.attachevent (' onload ', async_load);
Else
Window.addeventlistener (' Load ', async_load, false);
})();

This is similar to the previous approach, but the key is that it does not begin asynchronously loading JS immediately, but only when the onload begins to load asynchronously. This solves the problem of blocking onload event triggering.

Added:domcontentloaded and OnLoad events

Domcontentloaded: page (document) has been parsed, and the DOM elements in the page are already available. However, the pictures and subframe that are referenced in the page may not have finished loading.

OnLoad: All resources on the page are loaded (including pictures). The browser's load schedule stops at this point.

4. the asynchronous loading of jquery

Jquery.getscript (URL, [callback])

parameters: URL: To load the JS file address.

callback: callback function after successful loading.

$.getscript ("Test.js", function () {

Alert ("Script loaded and executed.");

});

This is similar to the previous method of loading test.js after success, call method display information.

5, Async and Defer properties

1. Defer Properties

<script src= "Js/jquery.js" defer></script>

The Defer property declares that there will be no document.write or DOM modifications in this script.

The browser will download file.js and other script with defer properties in parallel without blocking subsequent processing of the page.

The defer property is implemented in IE 4.0 for more than 13 years. Firefox supports the defer property starting at 3.5.

Note: All defer scripts are guaranteed to be executed sequentially.

2. Async Properties

<script src= "Js/jquery.js" async></script>

The Async property is HTML5 added. function is similar to defer, but it will be executed as soon as it is downloaded and cannot guarantee that the script will execute sequentially . They will be completed before the OnLoad event.

Firefox 3.6, Opera 10.5, IE 9, and the latest chrome and Safari all support the async attribute. Async and defer can be used at the same time, so all ie after IE 4 supports asynchronous loading.

3. Explain in detail

<script> tags in HTML 4.01 differ from HTML5:

· The type attribute is required in HTML 4 and is optional in HTML5.

· The Async property is new in HTML5.

· Individual properties (Xml:space) are not supported in HTML5.

Description:

1. Without the Async property, the script will get (download) and execute immediately before continuing with the subsequent processing, which blocks the browser's post-processing.

2. If there is a async attribute, the script will be downloaded and executed asynchronously, while the browser continues to follow up on the process.

3. HTML4 has the Defer property, which prompts the browser that the script will not produce any document elements (no document.write), so the browser will continue to follow up and render.

4. If there is no async property but there is a defer property, the script will execute after the page parse.

5. If both are set, then the Defer property is intended primarily to allow older browsers that do not support the async attribute to be treated in the original defer manner, rather than in a synchronized manner.