Keywords: induction load (async loading), delay loading (lazy loading), performs delay (lazy execution), async attribute, defer properties
First, synchronous and asynchronous loading of load form
1. synchronous load
We usually most commonly used form is this synchronous load:
<script src="http://yourdomain.com/script.js"></script>
Synchronous mode, also known as blocking mode, the browser will prevent the subsequent processing to stop the follow-up resolution, thus stopping the follow-up file to load (such as images), rendering code execution.
js reason for synchronous execution, because there may js output document content, modify dom, redirection behavior, so the default synchronous execution is safe.
The general recommendation is put before the <script> at the end of the page </ body> before, so to minimize this blocking behavior, and let the page displayed.
Simply put: loaded network timeline waterfall model, while the timeline is loaded asynchronously concurrency model.
2. Common asynchronous loading (Script DOM Element)
(function() { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://yourdomain.com/script.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); })();
Also known as non-blocking asynchronous loading, the browser at the same time, will continue to process subsequent pages in the download execution js.
This method is <script> tag within, js used to create a script element in the page and inserted into the document. So do non-blocking download js code.
async attribute is new in HTML5 asynchronous support, see below explanation, coupled with good (not without influence).
This method is called Script DOM Element method does not require js homologous.
The way js code is wrapped in an anonymous function and immediately executed in order to protect the variable name visible leaks to the outside, this is a very common way, are commonly used, especially in js library.
Such as Google Analytics and Google+ Badge are used in this asynchronous loading of code:
(function() { var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
(function() {var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s); })();
However, this loading before loading will stop executing the trigger onload event , and now many pages of code to perform additional rendering work even when onload and so on, so you'll block the initial processing of the page.
Asynchronous loading at 3. onload
(function() { function async_load(){ var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://yourdomain.com/script.js'; var x = 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 and previous similar way, but the key is that it is not immediately begin asynchronous loading js, but only when the onload start asynchronous loading. This would solve the problem of clogging onload event trigger.
Supplementary: DOMContentLoaded and OnLoad event
- DOMContentLoaded: page (document) has been parsed, dom element on the page is already available. But the page referenced in the picture, subframe may not have been loaded.
- OnLoad: all resources are loaded pages (including pictures). Browser loading progress stopped at this time.
Both point in time the page is loaded timeline is divided into three stages.
4. Create a script, is inserted into the DOM - recommended non-blocking mode
After loaded callBack
function loadScript(url, callback){ var script = document.createElement_x("script") script.type = "text/javascript"; if (script.readyState){ //IE script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; } else { //Others: Firefox, Safari, Chrome, and Opera script.onload = function(){ callback(); }; } script.src = url; document.body.appendChild(script); }
5. Other methods of asynchronous loading
Due to the dynamic characteristics of Javascript, there are many asynchronous loading method:
- XHR Eval
- XHR Injection
- Script in Iframe
- Script Defer
- document.write Script Tag
- Another method is to 0 seconds delay in combination with other methods used setTimeout.
XHR Eval: js access to content through ajax, then eval execution.
var xhrObj = getXHRObject(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState != 4 ) return; eval(xhrObj.responseText); }; xhrObj.open('GET', 'A.js', true); xhrObj.send('');
<span style="font-size: small;"> var xhr = new XMLHttpRequest(); xhr.open("get","load.js",true); xhr.onreadystatechange=function(){ if(readyState==4){ if(status>=200&&status<300||status==304){ var script = document.createElement("script"); script.type = "text/javascript"; script.src = xhr.responseText; document.body.appendChild(script); } } } xhr.send(null);
</span>
Script in Iframe: create and insert an iframe element, let asynchronous execution js
var iframe = document.createElement('iframe'); document.body.appendChild(iframe); var doc = iframe.contentWindow.document; doc.open().write('<body onload="insertJS()">'); doc.close();
Mobile GMail : js contents page is annotated, so it will not perform, then when you need to get the script element text content, eval execution after removing the comments.
<script type="text/javascript"> /* var ... */ </script>
See Resources for Velocity Steve Souders General Assembly and Taobao two lectures in 2010.
Two, async and defer attributes
1. defer property
<script src="file.js" defer>
</script>
或
<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script>
- Delay execution of the script, script tag is equivalent to the bottom of the body tag into the page, js script will be executed before the DOMContentLoaded document
- In addition to the newer versions of IE and Firefox, other browsers did not support, defer property in IE 4.0 is realized in more than 13 years! Firefox 3.5 from the start to support defer property.
The browser will be downloaded in parallel file.js and other script has defer property, without blocking the page subsequent processing.
Note: All defer script is guaranteed to be
in the order followed by the implementation
of.
2. async attribute
<script src="file.js" async></script>
async attribute is
HTML5
added. The role and defer similar, but it will be executed as soon as possible after the download,
can not guarantee that the script will be executed 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 async attribute. You can use both async and defer, so that after all IE 4 IE support asynchronous loading.
- async attribute applies only to external script (only when using the src attribute).
- Note: There are several ways to perform an external script:
- If async = "async": script asynchronously with respect to the rest of the page execution (when the page to continue parsing, the script will be executed)
- When the script execution will be completed parsing the page: If you do not use async and defer = "defer"
- If neither async nor defer: Before proceeding to resolve the page in a browser, reads and executes the script immediately
3. Detailed explanation
<Script> tag in HTML 4.01 and HTML5 distinction:
- type attribute is required in HTML 4, the in HTML5 is optional.
- async attribute is new in HTML5.
- Individual attributes (xml: space) is not supported in HTML5.
Description:
- No async attribute, script will get immediately (download) and execute before continuing to process the back, blocking the subsequent processing browser during this period.
- If there async attribute, then the script will be downloaded and executed asynchronously, while the browser continues subsequent processing.
- HTML4 in there defer property, which prompted the browser this script will not produce any document element (not document.write), so the browser will continue to follow-up processing and rendering.
- If you do not async attribute but defer attribute, then the script will be executed after the page parse.
- If you set up both, then defer attribute mainly to make async attribute is not supported by older browsers according to the original defer manner, rather than in a synchronized manner.
See also the official description:
Script the async
Personal added:
Since HTML5 has support asynchronous loading, why use recommended earlier that trouble (dynamically created script elements) way?
A: In order to support async is not compatible with older browsers. If in the future all browsers support, then directly add async attribute in the script is the easiest way.
Third, lazy loading (lazy loading)
Front to solve the asynchronous loading (async loading) the problem, and then talk about what is the delay in loading.
Lazy loading:
some js code page is not initiated immediately when needed, and in some cases later was needed. Lazy loading is not initially load these temporarily without js, but then be loaded asynchronously or by controlling js when needed later.
That is, js cut into a number of modules, load js only need to be performed immediately when the page is initialized, and then the other js loaded to delay the first time will need reloading.
In particular page has a number of different modules, many may not have or did not even being used.
Like lazy loading images only load display pictures in the picture appears in the visible region (in the drop-down scroll bar).
Fourth, the two-stage script loading and execution delay (lazy execution)
JS loading is actually made up of two stages: the download (download bytes) and execution (parse and execute).
- The browser will parse and execute them immediately, whether synchronous load After downloading the contents js or asynchronous loading.
- We said earlier asynchronous loading, the solution is just a matter of downloading stage, but the code will be executed immediately after downloading.
- The browser is the stage to perform parsing JS block any operation, when the browser is unresponsive.
We all know that through the network to download script requires significant time, but easy to overlook the second stage, the parsing and execution takes time. script parsing and execution time spent to be more than we thought, especially when a great script a lot. Some need to executed immediately, while others do not (for example, just showing an interface or perform an operation when needed).
The script can delay the execution, the first asynchronous download cached, but not executed immediately, but once executed the first time need.
The use of special techniques can be done separate download and execution (again thanks to the dynamic characteristics of javascript). For example, the JS content as Image objects or object loaded cached, so it will not immediately executed, and then perform the first time you need.
More in this section explain please view the link at the end of ControlJS Resources.
Tips:
1.
Analog longer download time
:
Write a back-end script, let it sleep some time. As in the jsp Thread.sleep (5000);, 5 seconds to receive such content.
2. The
simulation execution time longer js code
(this step is generally faster because not easily observed):
var t_start = Number(new Date());
while ( t_start + 5000 > Number(new Date()) ) {}
This code will execute js 5 seconds to complete!
Five, script label use
of
history
1. script in the HEAD
<head>
<script src=“…”></script>
</head>
<script src=“…”></script>
</head>
- Preventing subsequent download;
- In IE 6-7 in order script is downloaded, rather than the current "parallel download, execution order" fashion;
- Download and stop rendering (rendering) to resolve the implementation phase;
2. script on the bottom of the page (2007)
...
<script src=“…”></script>
</body>
- Does not prevent other downloads;
- In IE 6-7 in order script is downloaded;
- Download and stop rendering (rendering) to resolve the implementation phase;
3. asynchronous loading script (2009)
var se = document.createElement
('script');
se.src = 'http://anydomain.com/A.js';
document.getElementsByTagName('head')
[0].appendChild(se);
('script');
se.src = 'http://anydomain.com/A.js';
document.getElementsByTagName('head')
[0].appendChild(se);
This article says this is the way.
- Does not prevent other downloads
- In all browsers, script are parallel download
- Just stop rendering (rendering) parsing the implementation phase
- Asynchronous execution on demand Download + (2010)
Image new new SE = var ();
se.onload registerScript = ();
se.src = 'http://anydomain.com/A.js';
separating out and download the analysis execution js js
- Does not prevent other downloads;
- In all browsers, script download are parallel;
- Unblock rendering (rendering) until when really needed;
Sixth, asynchronous loading problems
When loaded asynchronously, you can not use document.write output document content.
In synchronous mode, document.write is the output of the document at the current script is located. In asynchronous mode, the browser continues to process subsequent pages of content, impossible to determine to what should be output document.write position, so asynchronous mode document.write not feasible. And to the page has onload after document.write will then lead to the implementation of the contents of the current page is empty, because it will automatically trigger document.open method.
In fact document.write reputation is not good, the best use.
alternative method:
- Although asynchronous loading can not be used after document.write, but can still perform operations onload dom (dom create or modify dom), so you can achieve some of their own dynamic output. For example, to create a floating element in the page asynchronously, and that its position on the page it does not matter, as long as to create the dom element added to the document can be.
- If the content of the element needs to be generated in a fixed position asynchronous, you can set a fixed position at the dom element as a target, so you know the location, you can modify this element after asynchronous loading.
Here a jquery method
$ (the Document) .ready ( function () { $ ( '# btnLoad1.button') the Click (. function () { $ ( '#header') HTML ( "Loading ...." ); // $ ( '#load_content') .load ( 'http://jqueryui.com/',); $ ( '#load_content') .hide () .load ( 'http://www.baidu.com', function (the responseText , textStatus, the XMLHttpRequest) { // the status of all successfully perform this function, the display data // textStatus four states success, error, NotModified, timeout IF (textStatus == "error" ) { var MSG = "error:" ; $('#header').html(msg + XMLHttpRequest.status + " " + XMLHttpRequest.statusText); } else if (textStatus == "timeout") { var msg = "操时: "; $('#header').html(msg + XMLHttpRequest.status + " " + XMLHttpRequest.statusText); } else { $('#header').html("加载完成"); $(this).fadeIn(); } }); }); });
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>JQuery - Load</title> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="-1"> <mce:script type="text/javascript" src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js"></mce:script> <mce:style type="text/css">
<!-- #header { margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #eee; } .buttonListArea { float: left; width: 150px; padding-right: 10px; border-right: 1px solid #eee; margin-right: 10px; } .button{ cursor:pointer; } .buttonArea { margin: 10px; padding-bottom: 20px; } #load_content { float: left; width: 550px; text-align: center; } -->
</mce:style>
<style type="text/css" mce_bogus="1">
#header
{ margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #eee; } .buttonListArea { float: left; width: 150px; padding-right: 10px; border-right: 1px solid #eee; margin-right: 10px; } .button{ cursor:pointer; } .buttonArea { margin: 10px; padding-bottom: 20px; } #load_content { float: left; width: 550px; text-align: center; } </style> </head> <body> <form id="form1" runat="server"> <div id="container"> <div id="header"> <h2>加载演示</h2> </div> <div class="buttonListArea"> <div class="buttonArea"> <div class="button" id="btnLoad1"> Load 1</div> </div> </div> <div id="load_content"> <h2>这是要被加载的区域</h2> </div> </div> </form> </body> </html>
Seven, JS modular management
Asynchronous loading, all js content needs to be a modular approach to segmentation organizations, there is a dependency, and asynchronous loading does not guarantee the order of execution.
In addition, namespace how management and other related issues. This part is beyond this article, refer to:
RequireJS , CommonJS and Wang Baoping (Taobao) of SeaJS its blog .
Eight, JS best practices:
- Minimize js file using compression tools to minimize it, and open http gzip compression. tool:
- Try not to put the <head>, as far as possible at the bottom of the page, the position is preferably </ body> before
- Avoid using document.write method
- Asynchronous loading js, use non-blocking, content is text
- Try not to use Inline Javascript directly on the page elements, such as onClick. Help unify the maintenance and caching.
reference:
- http://www.111cn.net/wy/js-ajax/46748.htm
- http://www.111cn.net/wy/js-ajax/46748_1.htm
- http://www.cnblogs.com/tiwlin/archive/2011/12/26/2302554.html
- Lazy Loading Asyncronous Javascript
-
In 2010 two lectures on Velocity China:Steve Souders(Google)的 Even Faster Web Sites (pdf)Li Mu (Taobao) the ad code stability and performance optimization of third-party real (pdf)
Reproduced in: https: //www.cnblogs.com/JoannaQ/archive/2013/06/04/3116373.html