Javascript Load Performance Optimization __java

Blocking Characteristics

The browser's processing of JavaScript consists of 2 parts: downloading and performing downloads are parallel in some browsers, and some browsers are serial, such as IE8, Firefox3, Chrome2, and the execution of serial downloads is blocked by default in all browsers. When JS does not perform HTML parsing and other operations

Blocking Features:

JavaScript has a blocking feature, and when the browser executes JavaScript code, it cannot do anything else at the same time. Whether the current JavaScript code is embedded or in an outside chain file, the download and render of the page must stop to wait for the script to complete. The reason the browser is blocked in downloading and executing scripts is that the script may change the namespace of the page or JavaScript, which can affect the content of the page later. One, script location

When a browser encounters a <script> tag that introduces an external JavaScript file, it stops all work to download and parse the execution, and in the process, page rendering and user interaction are completely blocked. Cases:

 
Because of the blocking nature of the script, the page will continue to render after all of the 3 JavaScript files have been downloaded, and placing the script at the top of the page will result in a noticeable delay, usually showing a blank page, the user cannot browse the content, or interact with the page.

ie8+, Firefox 3.5+, safari4+, and chrome2+ all allow JavaScript files to be downloaded in parallel, but will still block downloads of other resources such as pictures during downloading.

Because scripts block downloads of other resources on the page, it is recommended that javasrcipt be placed at the bottom of the body tag to reduce the impact on the entire page download. ii. organization of Scripts

Since <script> tags will block the rendering of the page while downloading, reducing the number of <script> tags can help improve the situation. It is recommended that you combine multiple JavaScript files into one, which reduces the cost of performance. You can also reduce the number of requests.

Reference: Merging and compressing JavaScript and CSS files on the service side three, non-blocking script 1, Delay script

HTML4 defines a defer attribute for the <script> tag, which allows the code to be deferred, but this property is ie4+ supported, so it is not an ideal cross-browser solution. Script that declares the defer property is parsed before the DOM load completes and the Window.onload event is triggered:

 
This code is in the pop-up order of browsers that support defer properties: script, defer, load, and browsers that do not support defer properties are defer, script, and load. 2. Dynamic Scripting elements

<script type= "Text/javascript" >function loadscript (URL, callback) {var script = document.createelement (' script ') ) Script.type = ' text/javascript '; if (script.readystate) {//for ie Script.onreadystatechange = function () {if (script.readystate = = ' Loaded ' | | script.rea Dystate = = ' complete ') {script.onreadystatechange = null; callback (); else {//other Browser script.onload = function () {callback ();};} script.src = URL; document.getElementsByTagName (' head ') [0].appendchild (script);} </script>
 
Loadscript function Usage

<script type= "Text/javascript" >//Single File Loadscript (' File1.js ', function () {alert (' loaded! ');}); Multiple file Loadscript (' File1.js ', function () {loadscript (' file2.js ', function () {loadscript (' file3.js '), function () {alert (' All Files loaded! '); }); }); });</script>
 
The point of this technique is that whenever a download is started, the download and execution of the file does not block other processes in the page, and you can even place the code in the head area of the page without affecting the rest of the page (except for the HTTP link that downloads the file). 3. XMLHttpRequest Script Injection

This technique first creates a Xhr object, then downloads the JavaScript file with it, and finally creates a dynamic script element to inject the code into the page.

<script type= "Text/javascript" >var xhr = new XMLHttpRequest (); Xhr.open (' Get ', ' file1.js ', true); Xhr.onreadystatechange = function () {if (xhr.status >= && xhr.status <300 | | xhr.status = = 304) {var s Cript = document.createelement (' script '); Script.type = ' Text/javascript '; Script.text = Xhr.responsetext; Document.body.appendChild (script); }};xhr.send (NULL);</script>
 
The advantage of this approach is that JavaScript code can be downloaded directly but not executed immediately. Since the code is returned outside the <script> tag, it is not automatically executed after downloading, which makes it possible to postpone the script until you are ready. The limitation of this approach is that JavaScript files must be in the same domain as the requested page, which means that JavaScript files cannot be downloaded from CDN and therefore not suitable for large web sites or projects. Iv. recommended non-blocking loading mode 1, the YUI3 way 2, Lazyload (1.5k)

Yahoo!search engineer Ryan Grove created a generic delay-loading tool that is an enhanced version of the Loadscript () function.

Usage examples:

<script type= "Text/javascript" src= "lazyload-min.js" ></script><script type= "Text/javascript" > Lazyload.js (' The-reset.js ', function () {application.init ();}); </script>
 
Lazyload also supports multiple JavaScript files and ensures that they can be executed in the correct order in all browsers. To load multiple javscript files, you only need to pass an array of URLs to the lazyload.js () Y method:

<script type= "Text/javascript" src= "lazyload-min.js" ></script><script type= "Text/javascript" > Lazyload.js ([' First.js ', ' the-reset.js '], function () {application.init ();}); </script>
 
Project Address: Https://github.com/rgrove/lazyload 3, Labjs (4.7k)

LABJS is a non-blocking loading tool that Kyle Simpson inspired by Steve Sounders. Usage examples:

<script type= "Text/javascript" src= "lab.js" ></script><script type= "Text/javascript" > $LAB. Script (' The-reset.js '). Wait (function () {application.init ();}); </script>
 
$LAB. Script () method is used to define JavaScript files that need to be downloaded, $LAB. Wait () to specify the functions that are called when the file is downloaded and executed.

To download multiple javscript files, simply link to another $lab.script () method:

<script type= "Text/javascript" src= "lab.js" ></script><script type= "Text/javascript" > $LAB. Script (' First.js '). Script (' The-reset.js '). Wait (function () {application.init ();}); </script>
 
What distinguishes LABJS is its ability to manage dependency relationships. In general, a continuous <script> label means that files are downloaded and executed sequentially.

LABJS allows you to use the Wait () method to specify which files need to await other files. In the above example first.js is not guaranteed to execute before the The-reset.js code, to ensure this, you must invoke wait () after the first script () method:

<script type= "Text/javascript" src= "lab.js" ></script><script type= "Text/javascript" > $LAB. Script (' First.js '). Wait (). Script (' The-reset.js '). Wait (function () {application.init ();}); </script>
 
Project Address: http://labjs.com/ 4, Seajs (7.5k)

Seajs is a modular loading framework developed by Amoy Bao Yube that follows the COMMONJS specification and can be used to easily and cheerfully load arbitrary javascript modules. For more information: http://seajs.com/docs/ 5, do frame (3.5k)

Do is a lightweight JavaScript development framework developed by Douban Kejun. At present Do.min.js. Its core function is to organize and load the modules. Loads a policy that takes a parallel asynchronous queue and can control the timing of execution. Do can arbitrarily replace the core class library, the default is jquery.

Project Address: Https://github.com/kejun/Do 6, Requirejs (13.1k)

Project Address: http://requirejs.org/