Home >Web Front-end >JS Tutorial >YUI Compressor compression JavaScript principle and micro-optimization_javascript skills

YUI Compressor compression JavaScript principle and micro-optimization_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:44:181201browse

I recently wrote a jQuery plug-in. When the optimization was completed, I found that the compressed files were relatively large. I thought about those that can be modified and optimized. I found that there is a lot of room to learn about compression principles. Through this time, I compressed JavaScript with YUI Compressor. I have a deep understanding that those that can be compressed, especially those that cannot be compressed, need to be very clear, so that the plug-ins can be written to keep the file smaller and the code more compact, and during the optimization process, it will also be found that the code needs to be The improvements will be of great help in the future. I randomly found an article on the Internet to record it.

YUI Compressor compresses JavaScript content including :
Remove comments
Remove extra spaces
Subtle optimization
Identifier Replacement

What subtle optimizations does YUI Compressor include?
object["property"] , if the property name is a legal JavaScript identifier (note: a legal JavaScript identifier starts with a letter, optionally followed by one or more letters, numbers or underscores) and is not a reserved word, it will be optimized to: object.property
{"property":123}. If the property name is a legal JavaScript identifier and is not a reserved word, it will be optimized to {property:123} ( Note: In object literals, it is not mandatory to quote the property name if it is a legal JavaScript identifier and is not a reserved word).
'abcd'efgh', will be optimized to "abcd'efgh".
"abcd" "efgh", if it is a string connection, it will be optimized to "abcdefgh" (Note: All under the premise of using YUI Compressor, for the string connection in the script, use the connector " " for efficiency and highest maintainability).
The most effective compression optimization for JavaScript is identifier replacement.
For example:

Copy code The code is as follows:

(function(){
function add(num1, num2) {
return num1 num2;
}
})();

After replacing the attribute identifier:
Copy code The code is as follows:

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

Removing the extra spaces finally becomes:
Copy code The code is as follows:

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

YUI Compressor identifier replacement only replaces function names and variable names, so what cannot be replaced?
Primitive values: string, boolean, number, null and undefined. Generally speaking, strings occupy the most space, followed by non-numeric literals (true, false, null, underfinded).
Global variables: window, document, XMLHttpRequest, etc. The most commonly used ones are document and window.
Attribute name, such as: foo.bar. The space occupied is second only to strings. The "." operator cannot be replaced, and a.b.c consumes more space.
Keywords. Keywords that are often overused are: var, return. The best optimization method: the var and return keywords appear only once in a function.
The optimization treatment for primitive values, global variables, and attribute names is roughly the same: any literal value, global variable, or attribute name used more than 2 times (inclusive) should be replaced by local variable storage.
But there are some cases where identifier substitution is prohibited:
Use the eval() function. Solution: Do not use or create a global function wrapper eval().
Use the with statement. Solution: The method is the same as above.
Conditional comments for JScript. The only solution: don't use it.
Since YUI Compressor is built on the rhino interpreter, all the above optimizations are safe.
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn