Javascript optimization skills (document slimming) _ javascript skills

Javascript optimization techniques (document slimming) have recently been researching Javascript-related technologies. In the Javascript advanced programming, a chapter focuses on the importance of optimizing Javascript code. I believe that many Javascript developers will be more or less exposed to such problems during development.

In most cases, code optimization is not an important part in actual development. However, once the code is complete, developers always expect the shorter the code, the more efficient the better. Based on the knowledge gained from the book and my experience in the actual development process, the following describes some of the tricks I have adopted (which can be described as follows ).

Preface

Compared with the script language, the compiled language does not need to be too concerned about optimization issues. To a great extent, the compiler will perform optimization operations during compilation. For example, all variables, functions, and objects are replaced with symbols and pointers that only the processor can understand (that is, executable files ). Other scripting languages do not need to worry too much about the file size, but Javascript is different.
Because it first needs to download the source code from the server and then be executed by the client browser. Therefore, the speed of Javascript code is divided into two parts: download time (depending on the file size) and execution speed (depending on the code algorithm ). This article mainly discusses the optimization of Javascript download time, that is, how to reduce the size of Javascript files as much as possible.
Here, you must remember that the number is 1160, which is the number of bytes that can be placed in a single TCP/IP package. Therefore, the best expectation is to keep each Javascript file at 1160 bytes to get the best download time.

Delete comment

This seems nonsense, but many developers will forget it. In the actual production environment, all comments in the script should be deleted. Annotations are important during development. They help the team understand the code. However, in the actual production environment, annotations obviously increase the size of the script file. Deleting them does not affect the actual running of the script.

Delete tabs and spaces

Code with good indentation and spaces is usually well readable. But the browser does not need these extra tabs and spaces, so it is best to delete them. Of course, do not forget the space between function parameters, value assignment statements, and comparison operations. For example

Function showMeTheMoney (money)
{
If (! Money ){
Return false;
} Else {
...
}
} Can be optimized

Function showMeTheMoney (money) {if (! Money) {reutrn false;} else {...}}

This reduces part of the capacity.

Delete all line breaks

There are many ideas about the existence of line breaks in Javascript, but the bottom line is that line breaks increase the readability of the Code. However, excessive line breaks can also increase the size of the Code.
The linefeed may not be deleted for some reason, so ensure that the file is in Unix format. Because line breaks in Windows and Mac formats use two characters, and Unix only uses one character. Therefore, converting a file to a Unix format can save some bytes.

Replace variable name

This is probably the most boring method, which is usually not done manually. After all, the variable name is meaningless to the interpreter (but more friendly to developers ), replacing descriptive variable names with simpler and shorter names in the production environment can also reduce the size of a part. For example, the above Code can be reduced:

Function sm (m) {if (! M) {reutrn false;} else {...}}

This may seem a headache, but the actual effect is the same.

Tools used

It may be difficult to use the above method. Fortunately, there are ready-made external tools to complete these steps. Below are some simple introductions:
ECMAScript Cruncher: http://saltstorm.net/depo/esc/
JSMin (The JavaScript Minifier): http://www.crockford.com/javascript/jsmin.html
Online JavaScript Compressor.: http://dean.edwards.name/packer/

I guess you will be interested in reading this article.

Other methods

Replace boolean values

For comparison, true is equal to 1, and false is equal to 0. Therefore, the literal values in the script can be replaced by 1, while false values can be replaced by 0. 3 bytes are saved for true, and 4 bytes are saved for false.

Shorten negative detection

The Code usually contains a statement that checks whether a value is valid. In most cases, the non-judgment is to determine whether a variable is undefined, null, or false, for example:

If (myValue! = Undefined ){
//...
}

If (myValue! = Null ){
//...
}

If (myValue! = False ){
//...
}

Although these are all correct, logical non-operators can have the same effect:

If (! MyValue ){
//...
}

Such replacement can also save some bytes.

Array and object literal

This is easy to understand. For example, the two rows are the same:

Var myArray = new Array;
Var myArray = [];

However, the second line is much shorter than the first line and can be easily understood. Similar object declaration:


Var myObject = new Object;
Var myObject = {};

For example, the following statement:

Var mySite = new Object;
MySite. author = "feelinglucky ";
MySite. location = "http://www.gracecode.com ";

This can be easily understood and much shorter:

Var mySite = {author: "feeinglucky", location: "http://www.gracecode.com "};

Okay. This is now. As mentioned above, the speed of Javascript code is divided into two parts: download time (depending on the file size) and execution speed (depending on the code algorithm ). This article discusses the optimization of the download time and the speed of the next discussion (it seems very technical, isn't it ).

Homework is arranged below. You may be interested in learning how jQuery compresses its 70 KB code to about 20 kb.