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.