How to improve website performance against JavaScript

In particular, when downloading JavaScript files, parallel downloads are actually disabled and page rendering is blocked!

JavaScript download

When downloading a JavaScript script file, the browser does not start other downloads in parallel. Instead, it allows the JavaScript script file to be downloaded separately before continuing other requests. This poses a big problem to the overall page performance. The solution is as follows:

Solution 1: Inline JavaScript scripts in the page, that is, directly write the JavaScript script in the HTML Tag.
Advantage: the fastest speed. On the homepage of a large website, you can reasonably embed part of the JavaScript script directly in the HTML Tag.
Disadvantage: JavaScript scripts are not cached independently. Other pages cannot share the JavaScript script (cannot be reused ).

Solution 2: Place the link of the JavaScript script tag at the bottom of the HTML file tag.
Requirement: the script does not contain the document. write () method to rewrite the page.

Solution 3: Use the Defferred script. That is, adding the defer attribute to the link tag indicates that the JS script does not contain the document. write () method.
Defect: After the Defferred script is used in Firefox, the JavaScript script will still block rendering and block parallel download.
In IE, the effect is not obvious.

Conclusion: If a script can use the Defferred script technology, it can definitely be moved to the bottom of the page!
Solution 3 can be replaced by solution 2.

Solution 4: Download after loading. That is, after the JavaScript script is loaded on the page, it is dynamically downloaded through the onload event. (CSS is also common)
Advantage: HTML page rendering is not blocked, and JavaScript scripts can be reused (the scripts will be cached in the browser ).
Disadvantage: Additional JavaScript code is generated to implement this function, which increases the complexity of the program.
Problem: It may be loaded twice (Inline and external ).

You can use IFrame to nest a page and load JavaScript scripts.
Example: http://stevesouders.com/hpws/post-onload.php

Solution 5: Dynamic inline. Use the cookie as an indicator and code for determination to inline external JS into the page.
Dynamic inline is a further improvement of "Download after loading. It also increases the complexity of the program.
Although JavaScript scripts are recommended to be placed at the bottom of the page, CSS style sheets should be placed at the top of the page!

Simplified JavaScript

Minification removes unnecessary characters, comments, and spaces from the code to reduce the size of JavaScript code, thus improving the JavaScript download length and loading speed.

Simplified tool: JSMin JS Minifier js Compression
JSMin is used to remove all unnecessary characters, comments, and spaces in javascript files.

Cmd usage: C: \ Documents ents and Settings \ xugang> jsmin <openWin. js> js_rerurn.js
1. Specify the jsmin.exe folder first.
2. openWin. js is the source file
3. js_rerurn.js is the target file

ShrinkSafe (formerly called Dojo Compressor) http://dojotoolkit.org/docs/shrinksafe
ShrinkSafe is used to remove white spaces in javascript files and shorten the variable name by replacement.
Cmd usage: java-jar shrinksafe. jar infile. js> outfile. js
Shrinksafe. jar is the tool name
Infile. js is the source file
Outfile. js is the target file

Note: When running on the console, make sure that shrinksafe. jar and js. jar are in the same directory, and the input JS source file and the output JS target file will also be in the same directory. (The default directory is in the C root directory)

Generally, you can use both JSMin and ShrinkSafe tools to streamline your JavaScrip file.
Compression component

At the same time, do not forget to compress scripts, style sheets, and HTML documents to reduce the response time through HTTP header declaration.
Browser client request: Accept-Encoding: gzip, deflate
Response from the Web server: Content-Encoding: gzip
Gzip is a popular and ideal compression method, and deflate is not very popular.