Home > Developer > JavaScript

High performance javascript: loading and executing

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

before we get to the point, I'll introduce you to a very good book, "High Performance JavaScript." Let's take a look at this article and I'll share some of the gains I've seen in this book.

Blocking features :
JS has a very silent blocking feature, that is, when the browser in the execution of JS code, can not do anything else, whether the code is embedded or external.

Script Location:
browser in the introduction of a foreign 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 the page load when the pause or even the appearance of a blank page, JS It is important that the script be placed at the bottom of the page as much as possible:

 
  
  
     
   
   
  1.  
    2. 
   
  2.   
    3. 
   
  3. <t Itle> Untitled document </title>   
    4.  
   
   
  4.  <link rel= "stylesheet  type=" Text/css " href=" Styles.css " />   
    5.  
   
   
  5.  
    6. 
   
  6.  <body>   
    7.  
   
   
  7. <p> the contents of the page ... </p>   
    8.  
   
   
  8.  <!--  recommended location,: -->   at the bottom of the page; 
    9.  
   
   
  9. <script type= Text/javascript " src=" File1.js ></script>   
    10.  
   
   
  10.  <script type= "Text/javascript"  src= "File2.js" ></script>   
    11.  
   
   
  11. <script type= "Text/javascript"   Src= "File3.js" ></script>   
    12.  
   
   
  12.  </body>   
    13.  
   
   
  13.  
    14.

Organization Scripts:
to improve the congestion above, minimize the number of <script> tags in the page, as well as the additional performance overhead of HTTP requests, which means that you should reduce the number of scripts on the page.

You can manually merge your multiple JS files, you can also use a similar Yahoo! Combo handler such as real-time online services to achieve, such as the following <script> tag is actually loaded with 3 JS files:

 
  
  
    
  
   
   
  1.  
    2. 
   
  2.  
    3. 
   
  3. <title> Untitled Document </title>
    4. 
  
   
   
  4. <link rel= "stylesheet" type= "Text/css" href= "Styles.css"/>
    5. 
  
   
   
  5.  
    6. 
   
  6. <body>
    7. 
  
   
   
  7. <p> content of the page ... </p>
    8. 
  
   
   
  8. <!--recommended location at the bottom of the page:-->
    9. 
  
   
   
  9. <script type= "Text/javascript" src= "Http://yui.yahooapis.com/combo?file1.js&file2.js&file3.js" > </script>
    10. 
  
   
   
  10. </body>
    11. 
  
   
   
  11.  
    12.

Non-blocking script:
to block the situation, here are several scenarios for implementing the parallel download of the JS script.

1. Delayed scripting

HTML4 defines a defer attribute for the <script> tag, which allows the code to be deferred, but only ie4+ and Firefox 3.5+ support. The <script> that declares the defer property is parsed before the DOM load completes and the Window.onload event is triggered:

 
  
  
    
  
   
   
  1. <script type= "Text/javascript" src= "File1.js" defer></script>
    2.

2. Dynamic Scripting elements
This is the most common solution for dynamically creating <script> elements through the DOM and inserting them into a document that starts downloading when the element is added to the page, so that no matter when the download is started, the download and execution of the file does not block other processes on the page.

However, it is important to note that code loaded in this manner is executed immediately, so that you need to understand 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 to go, and that non IE browsers trigger a load event when the <script> element is received. , and IE will trigger a ReadyStateChange event and be judged by the readystate attribute. Here is a function that dynamically loads a JS script in a compatible way::

 
 
    
  
  
  1. 
  
  2. function Load_script (URL, callback)
    3. 
  
  
  3. 
  
  4. {var script = document.createelement ("script");
    5. 
  
  
  5. 
  
  6. Script.type = "Text/javascript";
    7. 
  
  
  7. 
  
  8. if (script.readystate)
    9. 
  
  
  9. 
  
  10. {//ie
    11. 
  
  
  11. 
  
  12. Script.onreadystatechange = Functio ()
    13. 
  
  
  13. 
  
  14. {
    15. 
  
  
  15. 
  
  16. if (script.readystate = = "loaded" Script.readystate = = "complete")
    17. 
  
  
  17. 
  
  18. {
    19. 
  
  
  19. 
  
  20. Script.onreadystatechange = null;
    21. 
  
  
  21. 
  
  22. Callback ();
    23. 
  
  
  23. 
  
  24. }
    25. 
  
  
  25. 
  
  26. }
    27. 
  
  
  27. 
  
  28. }
    29. 
  
  
  29. 
  
  30. Else
    31. 
  
  
  31. 
  
  32. {//others
    33. 
  
  
  33. 
  
  34. Script.onload = function () {
    35. 
  
  
  35. 
  
  36. Callback (); }
    37. 
  
  
  37. 
  
  38. }
    39. 
  
  
  39. 
  
  40. script.src = URL;
    41. 
  
  
  41. 
  
  42. document.getElementsByTagName ("Head") [0].appendchild (script);
    43. 
  
  
  43. 
  
  44. }
    45.

You can save this function to a load_script.js file, and then use that function to load other scripts, and when you load multiple scripts, you can concatenate the execution of Load_script () in order to ensure the correct loading sequence, and finally, as mentioned above, to the bottom of the page, This is a perfect solution.

 
 
    
  
  
  1. 
  
  2. <script type= "Text/javascript" src= "Load_script.js" ></script>
    3. 
  
  
  3. 
  
  4. <script type= "Text/javascript" >
    5. 
  
  
  5. 
  
  6. Load_script ("File1.js", function ()
    7. 
  
  
  7. 
  
  8. {
    9. 
  
  
  9. 
  
  10. Load_script ("File2.js", function ()
    11. 
  
  
  11. 
  
  12. {
    13. 
  
  
  13. 
  
  14. Load_script ("File3.js", Functio () {
    15. 
  
  
  15. 
  
  16. The operation after all loading ...
    17. 
  
  
  17. 
  
  18. } );
    19. 
  
  
  19. 
  
  20. } );
    21. 
  
  
  21. 
  
  22. } );
    23. 
  
  
  23. 
  
  24. </script>
    25.

3.XMLHttpRequest Script Injection

It is loaded through Ajax, but this is not a cross-domain load and does not apply to large web sites.

Recommended Non-blocking-Free mode
The work we have done above of course has been completed by those cattle, and written a number of excellent JS class library so that we can use, they are very good to solve the problem of JS script blocking, to achieve parallel downloads, such as: YUI3, Lazyload, Labjs and so on.

"Edit Recommendation"

    1. JavaScript cross-domain summarization and solutions
    2. Developing mobile applications using JavaScript
    3. 10 amazing HTML5 and JavaScript effects
    4. JavaScript beginners should pay attention to seven details
"Responsible editor: Fu Tao TEL: (010) 68476606"


This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More