JavaScript lazy Loading and async (defer and async)

Always write code when the common habit is that all the JS file directly loaded in the document's head tag, in the writing JS file sometimes to get some file objects when the empty object, this is because the document structure has not been loaded, but the JS file has been loaded. That is to say, although the JS statement to get the object, but because the DOM structure has not been loaded, so the acquisition of an empty object, further testing found in the Firebug console under the execution of the assignment statement can be obtained after the object, The same is because the document structure is already in the loaded state after the document has been displayed, so you can get to the corresponding Document object directly.

There are two ways of solving this: defer and async.

• defer= "Defer": This property is used to inform the browser that this script code will not produce any document content. For example, the document.write () method in JavaScript code will not ride, the browser encounters such code will be ignored, and continue to execute the following code. The defer property can only be the same as the property name. In HTML syntax format, it is also possible to not define property values, just use property names.
• async= "True/false": This property is a new property in HTML5 that is capable of asynchronously loading and executing scripts without blocking the loading of pages because of loading scripts. Once the download is complete, it will be executed immediately.

The defer property in script is false by default, so you need to explicitly call this property when you use it.
The defer can be used either to load JS files or inline scripts.
Plus defer equals to be executed after the page is fully in, equivalent to window.onload, but more flexible than window.onload on the application! Actually defer is closer to domcontentload.
In fact, the script executes before the OnLoad event, that is, when the document is loaded, not equal to the download of the resource, including the picture.

Async and defer, do not block the download of other resources, so does not affect the loading of the page, but in the case of async, JS document once downloaded will be executed immediately, so it is likely not in accordance with the original order to execute, if JS has a dependency, you should pay attention.

Comparison of defer and async

Same point:

• Do not block page rendering when loading files;
• Invalid for the inline script;
• The Document.Write method cannot be called in a script that uses these two properties;
• An event callback with the script onload;
• Allows for undefined attribute values, using only property names;

Different points:

• Async is defined in version html4.0 of HTML, which causes different levels of support due to different browser versions defer;html5.0;
• Execution time: The script for each async attribute executes immediately after it is downloaded, and is executed before the Load event of the window. As a result, it is possible that the sequence of script execution is disrupted, and every script of the defer property is executed after the page has been parsed, in the order it was originally executed, and before the document's domcontentloaded.

There are three possible combinations of these two properties:

• If Async is true, then the script executes asynchronously after the download is complete.
• If Async is False,defer true, then the script executes after the page is parsed.
• If both async and defer are false, then the script will stop parsing the page, download and execute it immediately.

Example:

<type=src=defer></script> directly on the head tag

The code in the body of the HTML:

<DivId="First_menu" >
<Ul>
<Liclass="Individual_info" >
<Divclass="Menu_content" >
<Iclass="FA Fa-user" ></I>
<P>Personal Information </P>
</Div>
</Li>
<Liclass="Prizes_amount" >
<Divclass="Menu_content" >
<Iclass="FA Fa-pencil-square-o" ></I>
<P>Winning statistics </P>
</Div>
</Li>
<Liclass="Attendence_management" >
<Divclass="Menu_content" >
<Iclass="FA Fa-calendar" ></I>
<P>Attendance Management </P>
</Div>
</Li>
<Liclass= <class= <i class= "FA Fa-file-excel-o" ></I> 
 << Span style= "color: #f6624a;" >p> Expand the table item </P> 
 </div> 
 </LI> 
 </UL> 
 </< Span style= "color: #f6624a;" >div> 
 JS code: var li_list=$  (  

Li_list is an empty object before adding defer, the object can be obtained normally after adding the defer property
You can also get to an object after you set the Async property to True


Reference: HTTP://WWW.OSEYE.NET/USER/KEVIN/BLOG/53

JavaScript lazy Loading and async (defer and async)