Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what are the Web front-end performance optimization methods". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

I. streamlining javascript

Basic knowledge

Compact: remove all comments and unnecessary white space characters (spaces, line breaks, and tabs) from the javascript code, reducing the size of the javascript file.

Confusion: like streamlining, comments and whitespace are removed from the javascript code, and the code is rewritten. As part of the rewrite, the names of functions and variables are converted to shorter strings, thus further reducing the size of the javascript file.

Confusing shortcomings

1. Defect: the confusion process itself is likely to introduce errors.

two。 Maintenance: because obfuscation can change javascript symbols, you need to mark any symbols that cannot be changed to prevent the obfuscator from modifying them.

3. Debugging: obfuscated code is difficult to read, which makes debugging more difficult in a production environment.

Relatively speaking, downsizing is much less likely to go wrong.

An example of simplification and confusion

This example will use JSMin for streamlining and yuicompressor for confusion. 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)

}

The simplified code of JSMin:

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

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

Yuicompressor obfuscated code:

Function show (bpena) {alert (b); alert (a)} function test (cMagna) {var baccarat show (cmaga)}

It can be seen that confusion is more likely to reduce the size of js code.

Choose between simplification and confusion

We know that enabling gzip compression can reduce the transmission size of components, and the difference between simplification and confusion after compression will be further reduced, taking into account the additional risks of confusion, so priority is given to the use of streamlining. However, if you are in pursuit of performance, you can use confusion, but do enough testing to make sure that confusion does not cause other problems.

As a very popular front-end framework, JQuery not only has a development version, but also provides a version of min for the actual deployment of web. This version of min uses confusion and reduces the total amount of code.

Second, remove duplicate scripts

Reasons for duplicate scripts

There are two main factors that lead to the repetition of a script: team size and the number of scripts. Developing a website requires a huge amount of resources, and different teams need to build different parts of a large web. When the team integration and communication work is not done enough, it is easy to repeat scripts. Of course, the number of scripts is also important, the more the number of scripts, the more likely to repeat the script.

How repetitive scripts damage performance

Without caching, if the same script is linked repeatedly in html, two HTTP requests will be generated below IE7 (including IE7), but not above IE8.

In addition to generating unnecessary HTTP requests, repeated execution of scripts can be a waste of time, and repeated execution of scripts exists in browsers.

How to avoid repeating scripts

1. Form a good script organization. Repetitive scripts may occur in situations where different scripts contain the same script, some are necessary, but some are not, so scripts need to be well organized.

two。 Implement the script manager function.

This is the end of the content of "what are the Web front-end performance optimization methods". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.