Browser rendering blocking and optimization-detailed deferred loading, asynchronous loading.

I think a front-end engineer is excellent, and much depends on the ability to optimize the performance of the front end. So performance optimization is really important to the front end!!! This article describes what is blocking and why is it blocking? Blocking optimizations are commonly used in 5 ways and their considerations. Browser rendering blocking and optimization       what is blocking? In the page we usually refer to external files, and the browser parsing the HTML page is from top to bottom parsing, rendering, if Why is it blocking?      Because the browser does not know what scripts are executed in the a.js, it will affect the page, so the browser will wait until the JS file is downloaded and executed before continuing to render, if this time is too long, will be white screen.          CSS files are also the same, because the CSS file will affect the style, layout, color, and effect of the DOM, so the browser will wait until the CSS file is downloaded and executed to finish. For page performance, avoid blocking. Blocking optimizations-deferred loading, asynchronous loading.           deferred load ( lazy loading )If the initial rendering of the page does not depend on JS or CSS can be delayed loading, is the last load JS and CSS, the reference to the external file code at the end.　　　　　　For example, some button click events, such as the Carousel animation script can also be placed in the end. Principle: Because the browser by default is synchronous loading (this is to avoid repeatedly triggering "reflow" and "redraw"), then the browser from the top to bottom of the code loading, parsing, rendering, execution.

1 
defer lazy loading:after the document parsing is complete and execution is completed before the Domcontentloaded event, the parsing is downloaded in the order in which they appear in the document. The effect is the same as putting the script before the end of the document </body>. Note: Defer is best used inReferencesused in external files, use defer do not use the document.write () method; it is best not to request style information when using defer, because the stylesheet may not have been loaded and the browser will prevent the script from waiting for the stylesheet to load, which is equivalent to the stylesheet blocking script execution.  Asynchronous loading (non-blocking loading)       Note: The code in the A.js file is as follows, which can cause blocking, because if I don't click OK, I can't continue rendering.
1 alert ("Paused load") 2 alert ("Start loading")
 1) Async Asynchronous loading: Just tell the browser not to wait until the external file is loaded, can be downloaded while rendering, when the download is complete when the execution. Usage is "Async
1  <script type= "Text/javascript" src= "A.js" async></script>
               Note: ie10+ is only supported in the actual test.Firefox, Google, Microsoft support;Async does not use the document.write () method; it is best not to request style information when using async, for the same reason as defer. note 2:async in W3school introduced is IE9 can support, and IE9 is claimed to support, but the actual is not fully supported.  2)Script DOM element method: This method is to create a SCRIPT element with JS dynamically added to the document.                   Note:support all browsers (because IE low version ie10-is single threaded, so to modify A.js to show the correct effect)
1 setTimeout ("alert (' Asynchronous load succeeded ')", "(")     ///test IE time A.js file to be modified
1 <script type= "Text/javascript" > 2     (Function () {3      var s = document.createelement (' script '); 4      S.type = ' Text/javascript '; 5      S.async = true;                                        This sentence can be deleted, but the effect is the same. 6      s.src = ' js/a.js '; 7      var x = document.getelementsbytagname (' script ') [0]; 8      X.parentnode.insertbefore (s), x); 9  }) () </script>
Attention:This method will prevent the OnLoad event, such as the following code, will wait until the pop-up box in the a.js pops up and then executes.
1 <script type= "Text/javascript" >2     window.onload=function () {3         document.getElementById (' div '). Innerhtml= "onload complete" 4     }5 </script>
6//write in HTML
3) OnLoad asynchronous load: this andScript DOM element method is similar but he does not execute JS and HTML at the same time, he is such as HTML files, pictures and so on, the page all the resources to load the completion of the download to execute JS, such a method can avoid blocking the OnLoad event trigger. (compatible with all browsers)
1 (function () {2      function async_load () {3          var s = document.createelement (' script '); 4          s.type = ' TEXT/JAVASCR IPT '; 5          S.async = true; 6          s.src = ' js/yibujiaz.js '; 7          var x = document.getelementsbytagname (' script ') [0]; 8          X.parentnode.insertbefore (S, x); 9      }10      if (window.attachevent) one          window.attachevent (' onload ', async_load);      else13          Window.addeventlistener (' Load ', async_load, false);  
Note: Unlike the OnLoad event, the domcontentloadeddomcontentloaded is the page parsing complete, the DOM element of the page can be used, but the picture of the page, video and other resources may not be loaded complete I described above the optimization method is commonly used, in addition to other, such as asynchronous loading and Ajax asynchronous loading, body onload asynchronous loading, and so on, these are relatively few, interested engineers can check the relevant information. (If you are in the blog Park check basically just read an article on the good, the other basically said the same, change will not change, in fact, the whole network is similar, are said to reproduce each other). A.js All Codes
1//SetTimeout ("alert (' Asynchronous load succeeded ')", "(") 2//alert ("Load Paused") 3//alert ("Start loading")
HTML All code
<! DOCTYPE html>
Browser rendering blocking and optimization-detailed deferred loading, asynchronous loading.