How to treat JavaScript_javascript tips to improve website performance

Especially for JavaScript files, when downloading it, parallel downloading is actually disabled and also blocks the rendering of the page!

About JavaScript downloading

When downloading a JavaScript script file, the browser will not start other downloads in parallel, but will allow the JavaScript script file to be downloaded separately before continuing with other requests. This will be a big problem for the overall performance of the page. The solution is as follows:

Solution 1: Inline the JavaScript script in the page, that is, write the JavaScript script directly in in HTML tags.
Advantages: Fastest. On the home page of a large website, it is reasonable to inline part of the JavaScript script directly in the HTML tag.
Disadvantages: JavaScript scripts are not cached separately, and 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 a 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 using the defferred script in Firefox, the JavaScript script will still block rendering and parallel downloading.
In IE, the effect is not obvious.

Summary: If a script can use deferred scripting technology, then it can definitely be moved to the bottom of the page!
That is, "Solution 3" can be completely replaced by "Solution 2".

Solution 4: Use load-after-download. That is, the JavaScript script is dynamically downloaded through the onload event after the page is loaded. (CSS is also universal)
Advantages: It does not block the rendering of HTML pages and enables the reuse of JavaScript scripts (the scripts will be cached in the browser).
Disadvantages: Additional JavaScript code is generated to implement this function, which increases program complexity.
Problem: Possibly loaded twice (once inline, once externally).

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

Solution 5: Dynamic inlining. Use cookies as indicators and use code to make judgments to inline external JS into the page.
Dynamic inlining is a further improvement of "download after load". It also increases the program complexity again.
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!

About JavaScript minification

Minification is to remove unnecessary characters, comments, and whitespace from the code to reduce the size of JavaScript code, thereby improving the download length and loading of JavaScript speed.

Minimizing tool: JSMin JS Minifier js compression
JSMin is used to remove all unnecessary characters, comments, and whitespace in javascript files.

cmd Usage: C:Documents and Settingsxugang>jsmin js_rerurn.js
1. First specify the jsmin.exe folder
2. openWin.js is the source file
3. js_rerurn.js is the target file

Streamlining tool: ShrinkSafe (original name: Dojo Compressor) http://dojotoolkit.org/docs/shrinksafe
ShrinkSafe is used to remove whitespace in javascript files, and at the same time Variable names are also shortened by substitution.
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 in the console, make sure shrinksafe.jar and js.jar are in the same directory, and the input JS source file and output JS target file will also be in the same directory. (Default is in the root directory of drive C)

Generally, you can use the two tools JSMin and ShrinkSafe to streamline your JavaScript files.
Compress components

At the same time, don’t forget to compress scripts, style sheets and HTML documents through HTTP header declarations to reduce response time.
Browser client request: Accept-Encoding: gzip, deflate
Web server response: Content-Encoding: gzip
gzip is currently a popular and ideal and effective compression method, deflate is slightly less effective and less popular .