Dynamically loading external JavaScript script files

When we request a URL address, the browser loads all the necessary resources from the remote server, such as JavaScript, CSS, pictures, and so on. When you load JavaScript, the following situation often occurs:

In other words, when the browser touches the script tag, it will download the entire JS file, and will not download other resources, including other JS files. But this sentence is also "moisture", how much water, I do not know, depends on the type of browser we use and the corresponding version number. The following is the case of IE8, it will simultaneously download multiple JS files and CSS files, and pictures and other content will be blocked, this is slightly different from the previous understanding, IE8 more or less introduced a little bit of "concurrency."

In any case, because the JavaScript file download defined in the label form will cause the entire download to block, many people will write the script tag before </body>, or use a dynamic script mount method to speed up the page display. The specific examples can be seen from the following figure:

The script tag is written in the body tag to show the entire page earlier, this is relatively easy to understand, and dynamic script loading, is the use of JS dynamically create a script DOM object, and then add this DOM object to the current document, to achieve the JS file loading, This type of loading differs from the way the label is loaded in that it does not form a blockage.

The above mentioned content and picture resources are from the following two articles.

http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

http://www.webdigi.co.uk/blog/2009/avoid-javascript-blocking-content-download-on-your-website-during-page-load/

The specific implementation method can refer to the following code (http://stackoverflow.com/questions/2803305/javascript-how-to-download-js-asynchronously):

[JavaScript]View Plaincopy

2. var require = function (scripts, loadcallback) {
4. var length = scripts.length;
6. var first = document.getElementsByTagName ("script") [0];
8. var parentnode = First.parentnode;
10. var loadedscripts = 0;
12. var script;
16. For (var i=0; i<length; i++) {
18. Script = document.createelement ("script");
20. Script.async = true;
22. Script.type = "Text/javascript";
24. SCRIPT.SRC = Scripts[i];
28. Script.onload = function () {
30. loadedscripts++;
34. if (loadedscripts = = = length) {
36. Loadcallback ();
38. }
40. };
44. Script.onreadystatechange = function () {
46. if (script.readystate = = = "complete") {
48. loadedscripts++;
52. if (loadedscripts = = = length) {
54. Loadcallback ();
56. }
58. }
60. };
64. Parentnode.insertbefore (script, first);
66. }
68. };

Invocation Examples:

[JavaScript]View Plaincopy

1. require ([  
2.       "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",   
3.     
4. "http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yuiloader/ Yuiloader-min.js "&NBSP;&NBSP;
5. ], function  ( )  {  
6.     console.log (jQuery);  
7.     console.log ($);   

The above code is just one way of non-blocking loading of external JavaScript, and http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/ A number of other scenarios are listed:

• XHR eval–download the script via XHR and Eval () the responsetext.
• XHR injection–download the script via XHR and inject it into the page by creating a SCRIPT element and setting its text property to the ResponseText.
• Script in Iframe–wrap your The script in a HTML page and download it as an Iframe.
• Script DOM element–create a script Element and set its Src property to the script ' s URL.
• Script Defer–add The script tag ' s Defer attribute. This used to only work in IE, and is now in Firefox 3.1.
• document.write Script tag–write the <script src= "" > HTML into the page using document.write. This is loads script without blocking in IE.

Although these scenarios can be implemented without blocking downloads, it is also important to remember that for a domain the number of connections the browser can open is limited, and some of the relevant data can be found from the following links:

http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/

For the same domain, the number of connections is limited, but we can increase the number of connections by having a page reference the resources of multiple domains. As a result, some Web applications are sometimes found to divide dynamic programs and static resources into different applications. There is also an active method, that is, the client actively set the browser maximum number of connections: http://support.microsoft.com/?kbid=282402. For IE6 and 7来 said, the default maximum number of connections is 2, in the chat room, use "long polling" as a solution must be considered more.

Finally, a few articles, the same author at different times of the article, its content is all about dynamic loading, can be used as a reference:

• http://www.nczonline.net/blog/2009/06/23/loading-javascript-without-blocking/
• http://www.nczonline.net/blog/2009/07/28/the-best-way-to-load-external-javascript/
• http://www.nczonline.net/blog/2010/12/21/thoughts-on-script-loaders/
• http://www.nczonline.net/blog/2011/02/14/separating-javascript-download-and-execution/

Technology is always changing, and now the issues we care about may turn into past after a few years. Because of the new HTML5 standard, you can use the defer and Async properties on script (Http://dev.w3.org/html5/spec/Overview.html#the-script-element), If you add the technology and concept of the browser itself and the "Moore's Law" advocacy, 35 is almost enough.

Dynamically loading external JavaScript script files