1, asynchronous loading
1.1, three methods of asynchronous loading js 1, the defer asynchronous loading: the loading process and the subsequent document element JS is loaded in parallel (asynchronously), but after the execution of the JS all elements parsed, and it is in accordance with the execution of the script load order
<script type="text/javascript" src="tool.js" defer="defer"></script>
2, aysnc: the process of loading and rendering subsequent documents and the current JS load and execute in parallel (asynchronous), it is out of order, regardless of the order you specify, as long as it loads everything will perform
<script type="text/javascript" src="tool.js" async="async"></script>
3. dynamically generated
<script>
function loadScript(url,callback) { var script = document.createElement('script'); if(script.readyState){ script.onreadystatechange=function(){ if(script.readyState=='complete'||script.readyState=='loaded'){ callback(); } } }else{ script.onload=function(){ callback(); } } script.src=url; document.head.appendChild(script); } loadScript('00.js',function(){ test(); })</script>
2, js loading time line
1, to create a Document object, start parsing web pages. This phase = document.readyState 'loading';
2 encountered external link css, create a thread to load and continue to parse the document
3, encountered external js script, and there is no set async, defer, the browser loads, and blocked waiting for js loaded and after executing the script, and then continue to parse the document
4, encountered script external js, and is provided with async, defer, the browser creates threads to load and continue to parse the document; async attribute for the script, the script is loaded immediately after execution (asynchronous prohibited documen.write ())
5, etc. img encountered, to parse dom was normal, then the browser loaded asynchronously src, and continue to parse the document
6, when the document is parsed, document.readyState = 'Interactive'
7, parsing of the document is complete, all settings defer the script will be executed in the order. (Note that unlike async, but also prohibits the use of document.write ())
8, the Document Object DOMContentLoaded trigger event, which also marked the program is executed from the synchronization script execution stage, transformed into event-driven stage
9, when all async script loading after completion of the execution and, after completion of loading the like img, document.readyState = 'complete', window load event triggering the object
10, since, in an asynchronous manner in response to a user input, network events
