How to speed up the loading and execution of JavaScript

JS has a very silent blocking feature, that is, when the browser executes the JS code, do not do anything else at the same time, whether the code is embedded or external.

browser in the introduction of an external JS file <script> tag will stop all work to download and parse the execution of it, in this process, page rendering and user interaction is completely blocked, in order to avoid page loading and even blank page, the JS script should be placed at the bottom of the page as far as possible, This is important: Lanxi County Quwan Home Photography

To improve the blocking situation above, it is necessary to reduce the number of <script> tags in the page as much as possible, which also takes into account the additional performance overhead of the HTTP request, that is to say, reduce the number of the page's foreign-chain scripts.
You can manually merge your multiple JS files, or use a similar Yahoo! Combo handler such as real-time online services to achieve, such as the following <script> tag actually loaded 3 JS files:
To block the situation, here are a few scenarios for implementing parallel download JS scripts.
1. Deferred scripts
HTML4 defines a defer property for the <script> tag that can delay execution of the code, but this property is supported only by ie4+ and Firefox 3.5+. The <script> that declares the defer property is parsed before the DOM load is complete and window.onload event is triggered:
<script type= "Text/javascript" src= "File1.js" defer></script>
2. Dynamic Scripting elements
This is the most versatile solution for dynamically creating <script> elements through the DOM and inserting them into the document, where the file starts to download when the element is added to the page, so that the download and execution of the file does not block other processes on the page whenever the download is initiated.
However, it is important to note that the code that is loaded in this manner is executed immediately, which requires a clear understanding of the role of each file and the proper order of execution, and it is necessary to track and ensure that the script is downloaded and ready for completion, and that non-IE will trigger a load event when the <script> element is received. , and IE triggers a readystatechange event and is judged by the readystate attribute. The following is a function that is compatible with dynamically loading a JS script:
function Load_script (URL, callback) {      var script = document.createelement (' 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          script.onload = function () {              callback ();          }      }      script.src = URL;      document.getElementsByTagName (' head ') [0].appendchild (script);  }
You can save this function to a load_script.js file, and then use that function to load other scripts, when loading multiple scripts, in order to ensure proper loading order, you can concatenate the execution of Load_script () and finally, as mentioned above, at the bottom of the page, This is the perfect solution:
<script type= "Text/javascript" src= "load_script.js" ></script>  <script type= "Text/javascript" >load_script (' File1.js ', function () {      load_script (' File2.js ', function () {          load_script (' file3.js '), function () {              //All loaded operation ...          });}      );  );  
3. XMLHttpRequest Script Injection
It is loaded in Ajax mode, but it is not possible to load across domains and not for large web sites.
We have done this work of course has been done by those cows, and written some excellent JS class library so that we can use, they are good to solve the problem of JS script blocking, parallel download, such as: YUI3, Lazyload, LABJS, etc.
How to speed up the loading and execution of JavaScript