Web Front-end performance optimization Tutorial: streamline JavaScript to remove duplicate scripts

Web Front-end performance optimization Tutorial: streamline JavaScript to remove duplicate scripts

This is the seventh article in the Web Front-end performance optimization series. It focuses on streamlining Javascript code and removing repeated scripts. For a complete tutorial, see: Web Front-end performance optimization.

I. Simplified javascript

Basic knowledge

Simplified: removes all comments and unnecessary spaces (spaces, line breaks, and tabs) from javascript code to reduce the size of javascript files.

Obfuscation: Like streamlining, annotations and white spaces are removed from javascript code, and the code is rewritten. As part of the rewrite, the name of the function and variable will be converted to a shorter string, which further reduces the size of the javascript file.

Confusions

1. defects: the obfuscation process may introduce errors.

2. Maintenance: As obfuscation changes javascript symbols, You need to mark any symbols that cannot be changed to prevent obfuscators from modifying them.

3. debugging: confusing code is difficult to read, making debugging more difficult in the product environment.

Relatively speaking, the probability of streamlining errors is much less.

A simplified and confusing example

This example uses JSMin for streamlining and yuicompressor for obfuscation. The original js is as follows:

// Anthor: teroy /*

This is for test.

*/

Function show (name, day ){

Alert (name );

Alert (day );

}

Function test (name, day ){

Var variable = name;

Show (name, day );

}

Simplified JSMin code:

Function show (name, day) {alert (name); alert (day );}

Function test (name, day) {var variable = name; show (name, day );}

Code after yuicompressor obfuscation:

Function show (B, a) {alert (B); alert (a)} function test (c, a) {var B = c; show (c, )};

Obviously, obfuscation can reduce the size of js Code.

Streamline and confuse decisions

We know that enabling gzip compression can reduce the transfer size of the component. The difference between streamlining and obfuscation after compression will be further reduced. Considering the possible extra risks of obfuscation, we should give priority to streamlining. However, you can use obfuscation if you are pursuing the ultimate performance, but you must perform tests to ensure that obfuscation will not cause other problems.

As a very popular front-end framework, JQuery not only provides a development version, but also provides a min version for actual web deployment. This min version is confused, minimizes the total amount of code.

Ii. Remove duplicate scripts

Cause of repeated scripts

There are two major factors that lead to the repetition of a script: The team size and the number of scripts. Developing a website requires a large amount of resources. Different teams need to build different parts of a large web. When the team does not fully integrate and communicate, repeated Scripts may easily occur. Of course, the number of scripts is also an important part. The higher the number of scripts, the more likely it is to be repeated.

How duplicate scripts Damage Performance

If the same script is repeatedly linked in html without caching, IE7 or lower (including IE7) will generate two HTTP requests, but IE8 or above will not.

In addition to generating unnecessary HTTP requests, repeated execution of the script also wastes time. The repeated execution of the script exists in the browser.

How to avoid repeated scripts

1. Form a good script organization. Repeated Scripts may occur when different scripts contain the same script. Some of them are necessary, but some are not necessary. Therefore, you need to organize the script well.

2. Implement the script manager function.