YUI compressor compression JavaScript principle and micro-optimization _javascript skills

Source: Internet
Author: User
Tags reserved
Recently wrote a jquery plugin, in the final completion of the optimization, compared to find compressed file larger, thinking about those can be modified and optimized, and found that the principle of compression has a lot of space to learn, through this to Yui compressor compression JavaScript deep experience, Those can be compressed, especially those can not be compressed, need to be very clear, so that the plug-in can be written to keep the file smaller, more sophisticated code, and the process of optimization will find the code to improve the place, for the future will also be a great help. Casually find an article on the Internet to make a note.

YUI Compressor Compressed JavaScript content includes
To remove a comment
Removing extra spaces
Fine tuning
Identifier substitution (Identifier replacement)

YUI compressor include which micro-optimization it?
Object["Property", if the attribute name is a valid JavaScript identifier (NOTE: A valid JavaScript identifier--which starts with a letter and then selectively adds one or more letters, numbers, or underscores) and is not a reserved word, is optimized to: Object.property
{' Property ': 123}, if the attribute name is a valid JavaScript identifier and is not a reserved word, it is optimized to {property:123} (note: In object literals, if the property name is a valid JavaScript identifier and is not a reserved word, It is not mandatory to enclose attribute names in quotes.
' abcd\ ' efgh ', will be optimized for "ABCD ' Efgh".
"ABCD" + "EFGH", if the string is connected, will be optimized to "ABCDEFGH" (note: All in the use of YUI compressor, for strings in the script connection, use the connector "+" the efficiency and maintainability of the highest).
The most efficient compression optimization for JavaScript is when the generic identifier is replaced.
Like what:
Copy Code code as follows:

(function () {
function Add (NUM1, num2) {
return NUM1 + num2;
}
})();

After the replacement of the generic identifier:
Copy Code code as follows:

(function () {
function A (C, B) {
return c+ B;
}
})();

And then remove the extra space, and finally it becomes:
Copy Code code as follows:

(function () {function A (c,b) {return c+b;}}) ();

YUI Compressor identifier replace only the function name and variable name, which can not be replaced?
Raw values: String, Boolean, numeric, null, and undefined. In general, the string occupies the most space, not the numeric literal (true, false,null,underfinded).
Global variables: window, document, XMLHttpRequest, and so on. The most used is document, window.
Property name, such as: Foo.bar. Occupy space is second only to string, "." operator can not be replaced, and a.b.c more cost space.
Key words. Frequently overused keywords are: Var, return. Best way to optimize: a function that only appears once in the Var and return keyword.
The optimal handling of the original values, global variables, and property names is roughly the same: any literal value, global variable, or property name that is used more than 2 times (including 2) should be replaced with local variable storage.
In some cases, the substitution of identifiers is prohibited:
Use the eval () function. Workaround: Do not use or create a global function to encapsulate eval ().
Use the WITH statement. Workaround: Method ditto.
A conditional comment for JScript. The only workaround: no use.
Because YUI compressor is built on the basis of rhino interpreter, so all the above optimization is safe.
Related Article

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.