Javascript compression Optimization

Source: Internet
Author: User
Remove comments and spaces

The function of annotation is not explained. When a user accesses your websiteCodeIt's not a waste of the network bandwidth brought about by this code to get it without executing the annotation. As a result, the comment should be given to Del for compression.

Blank space is used to make the code beautiful and easyProgramFor the interpreter, the blank space is meaningless, but it takes time to scan it. Therefore, compression should also remove the meaningless blank spaces, including indentation and spaces, empty rows.

This step is only the first level of compression. To make JS files as small as possible, we have to adopt some new ideas.

Code optimization

Do we often use String concatenation like "ABCD" + "efgh? Therefore, we want to compress the data to "abcdefgh" directly during compression.
Two double quotes and one plus sign. If String concatenation is frequent, this optimization will save a lot of space and improve the execution efficiency of JS (because the two strings are spliced, the interpreter needs to apply again
Memory space, and then copy the strings at both ends ).

Is access to object attributes frequently? For example, O ["name"], or {"name": "object"} is defined. In this case, we can optimize it to O. name and {name: "object"} save several characters.

For example, var a = new array () is optimized to VaR A = [] (the object is replaced by {}). Multiple consecutive var definitions can be used, to optimize a statement definition.

At the same time, it can also properly improve the execution performance of JS! Foreign Language House

Do not underestimate these several bytes. In a large application, the number of users downloading your JS file is huge.

Variable replacement

To further reduce the file size, we need to analyze some JS lexical syntaxes and replace variables. Simple Example:

VaR myobj = 1;
Myobj ++;
Myobj --;
Alert (myobj );

Variable replacement means to replace the original variable name with a shorter variable name:

VaR A = 1;
A ++;
A --;
Alert ();

By comparing them, you will know how many bytes are saved and the code is effectively protected. Who knows what your a means, right? Inland transportation

Of course, I remember seeing a more awesome replacement. In my mind, I finally converted all the characters into a hexadecimal \ x format. Let me know what to do.

Undefined Optimization

Does if (! = Undefined? Many statements that contain undefined cannot be replaced with a shorter word. So I came up with a method. Before that, let's take a look at an example.

Function F1 (name ){
Alert (name );
}

F1 ();

We can find that the parameter F1 is called without a parameter, and the name parameter of F1 is undefined. So we optimized and reduced undefined.

For example, the following code is used:

(Function (name, undefined) {// here undefined is a variable! If you do not believe it, you can try to input another value for this function.
/* Here is our code region */
If (name! = Undefined)
Alert (name );
}) ('Name');/* When a valid parameter is defined as a function, more than one parameter is missing. This ensures that the second parameter has no input value, so that it becomes the undefined value */

When we compress the data, we will replace all undefined values with a variable A. Does this reduce the size of many bytes? Frameworks such as jquery have implemented this optimization. The structure of jquery's source code is:

/*!
* Jquery JavaScript library v1.6.2
* Http://jquery.com/
*
* Copyright 2011, John resig
* Dual licensed under the MIT or GPL version 2 licenses.
* Http://jquery.org/license
*
* Includes sizzle. js
* Http://sizzlejs.com/
* Copyright 2011, the dojo Foundation
* Released under the MIT, BSD, and GPL licenses.
*
* Date: Thu Jun 30 14:16:56 2011-0400
*/
(Function (window, undefined ){
/* Jquery Code */

window. jquery = Window. $ = jquery;
}) (window);

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.