yuicompressorjava

1. 如何提高網站頁面速度

網頁的加在一半就是代碼的載入，各種文件，以及一些因素，那麼就從這些因素去考慮就可以：
1、合並js文件和CSS
將JS代碼和CSS樣式分別合並到一個共享的文件，這樣不僅能簡化代碼，而且在執行JS文件的時候，如果JS文件比較多，就需要進行多次「Get」請求，延長載入速度，將JS文件合並在一起後，自然就減少了Get請求次數，提高了載入速度。
2、Sprites圖片技術
Spriting是一種網頁圖片應用處理方式，它是將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，然後利用CSS技術展現出來。這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了，可以減少了整個網頁的圖片大小，並且利用CSSSprites能很好地減少網頁的http請求，從而大大的提高頁面的性能。CSSSprites在國內很多人叫css精靈，很早就有了，在很多大型網站都有用到，特別是一些所有頁面都存在的圖標用得比較多，很好的提升載入速度。
3、壓縮文本和圖片
壓縮技術如gzip可以有效減少頁面載入的時間。包括HTML，XML，JSON(javaScript對象符號)，JavaScript和CSS等，壓縮率都可以在大小70%左右。文本壓縮用得比較多，一般直接在空間開啟就行，而圖片的壓縮就比較隨意，很多都是直接上傳，其實還有很大的壓縮空間。
4、延遲顯示可見區域外的內容
為了確保用戶可以更快地看見可見區域的網頁可以延遲載入或展現可見區域外的內容，為了避免頁面變形，可以使用佔位符標簽制定正確的高度和寬度。比如WP的jQueryImage LazyLoad插件就可以在用戶停留在第一屏的時候，不載入任何第一屏以下的圖片信息，只有當用戶把滑鼠往下滾動的時候，這些圖片才開始載入。這樣很明顯提升可見區域的載入速度，提高用戶體驗。
5、確保功能圖片優先載入
網站主要考慮可用性的重要性，一個功能按鈕要提前載入出來，用戶進入下載頁，一個只需要8s時間的下載花了5s在等待、尋找下載按鈕圖片，誰能忍受?
6、重新布置Call-to-Action按鈕
其實這個和上面一條是差不多的，都是從用戶體驗速度著手，跳過了網頁的整體載入速度。速度沒變，只是讓一些行為按鈕提前，Call-to-Action按鈕一般習慣設計在頁面底部，這樣的習慣對於用戶來說並不總是好的，購買用戶需要等到最下面載入出來才能點擊下一步操作。可以調整CTA按鈕的位置或使用滑動的圖片按鈕。很多大型購物網站的加入購物車就是這種類型。
7、圖片格式優化
不恰當的圖像格式是一種極為常見的減慢載入速度的罪魁禍首。正確的圖片格式可以讓圖片縮小數倍，如果保存為最佳格式。可以節省大量帶寬，減少處理時間時間，大大加快頁面載入速度，這是一種很常見的做法。
8、使用 Progressive JPEGs
ProgressiveJPEGs圖片是JPEG格式的一個特殊變種，名為「高級JPEG」。在創建高級JPEG文件時，數據是這樣安排的：在裝入圖像時，開始只顯示一個模糊的圖像，隨著數據的裝入，圖像逐步變得清晰。它相當於交織的GIF格式的圖片。高級JPEG主要是考慮到使用數據機的慢速網路而設計的，快速網路的使用者通常不會體會到它和正常JPEG格式圖片的區別。對於網速比較慢的用戶，這無疑有很好的體驗。
9、精簡代碼
這個可以說是最直接的一個方法，也是用得比較多的，對網頁代碼進行瘦身，刪除不必要的沉冗代碼，比如不必要的空格、換行符、注釋等，包括JS代碼中的無用代碼也需要清除。其中對於注釋代碼的清除可能有些人存在誤區，甚至有的在裡面堆砌關鍵詞。
10、延遲載入和執行非必要腳本

網頁中有很多腳本是在頁面完全載入完前都不需要執行的，可以延遲載入和執行非必要腳本。這些腳本可以在onload事件之後執行，避免對網頁上重要內容的呈現造成影響。這些腳本可能是自己網頁的甲苯，往往更多的是一些第三方腳本，這樣的有很多，比如評論、廣告、智能推薦、網路雲圖、分享等等，這些完全可以等主體內容載入完後再執行。
11、使用AJAX
AJAX即「Asynchronous Javascript +XML「，是指一種創建互動式網頁應用的網頁開發技術。通過在後台與伺服器進行少量數據交換，AJAX可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁(不使用AJAX)如果需要更新內容，必須重載整個網頁面。
12、自動化的頁面性能優化
自動化的頁面性能優化也就是藉助工具了，網站提速工具有很多，這里Radware推薦了自家的RadwareFastView，也算Radware給自家做了一個廣告，這里不多說了。

2. 怎麼使用yuicompressor2.4.2.jar進行js，CSS進行代碼混淆

目前開發Web應用Javascript發揮的作用越來越大，相關的Javascript框架也比較多。但是有一個問題，我們開發過程中，所有的JS代碼都添加了注釋，如使用JsDoc，代碼的可讀性比較強，同時這樣的代碼也便於調試。但是在產品環境中，我們希望這些JS代碼是壓縮和混淆過的，這主要是讓 JS代碼載入的更快，這也是Google AJAX Libraries API出現的原因。YUI Compressor 是一款由 Yahoo 公司開發的、功能非常強大的 JS、CSS 代碼混淆和壓縮工具，採用Java開發，目前很多Javascript Framework都使用YUI Compressor進行代碼分發。

二、使用簡介：

在命令行下執行 Java 程序，運行 yuicompressor jar 軟體包，來完成任務：

//壓縮JS
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js

//壓縮CSS
java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css

三、參考官方英文注釋：

3.1 How does the YUI Compressor work?

The YUI Compressor is written in Java (requires Java >= 1.4) and relies on Rhino to tokenize the source JavaScript file. It starts by analyzing the source JavaScript file to understand how it is structured. It then prints out the token stream, omitting as many white space characters as possible, and replacing all local symbols by a 1 (or 2, or 3) letter symbol wherever such a substitution is appropriate (in the face of evil features such as eval or with, the YUI Compressor takes a defensive approach by not obfuscating any of the scopes containing the evil statement) The CSS compression algorithm uses a set of finely tuned regular expressions to compress the source CSS file. The YUI Compressor is open-source, so don't hesitate to look at the code to understand exactly how it works.

3.2 Using the YUI Compressor from the command line

java -jar yuicompressor-x.y.z.jar

Usage: java -jar yuicompressor-x.y.z.jar [options] [input file]

Global Options
-h, --help Displays this information
--type <js|css> Specifies the type of the input file
--charset <charset> Read the input file using <charset>
--line-break <column> Insert a line break after the specified column number
-v, --verbose Display informational messages and warnings
-o <file> Place the output into <file>. Defaults to stdout.

JavaScript Options
--nomunge Minify only, do not obfuscate
--preserve-semi Preserve all semicolons
--disable-optimizations Disable all micro optimizations

GLOBAL OPTIONS

-h, --help
Prints help on how to use the YUI Compressor

--line-break
Some source control tools don't like files containing lines longer than,
say 8000 characters. The linebreak option is used in that case to split
long lines after a specific column. It can also be used to make the code
more readable, easier to debug (especially with the MS Script Debugger)
Specify 0 to get a line break after each semi-colon in JavaScript, and
after each rule in CSS.

--type js|css
The type of compressor (JavaScript or CSS) is chosen based on the
extension of the input file name (.js or .css) This option is required
if no input file has been specified. Otherwise, this option is only
required if the input file extension is neither 'js' nor 'css'.

--charset character-set
If a supported character set is specified, the YUI Compressor will use it
to read the input file. Otherwise, it will assume that the platform's
default character set is being used. The output file is encoded using
the same character set. IMPORTANT: if you do not supply this argument
and the file encoding is not compatible with the system's default
encoding, the compressor will throw an error. In particular, if your
file is encoded in utf-8, you should include this parameter.

-o outfile
Place output in file outfile. If not specified, the YUI Compressor will
default to the standard output, which you can redirect to a file.

-v, --verbose
Display informational messages and warnings.

JAVASCRIPT ONLY OPTIONS

--nomunge
Minify only. Do not obfuscate local symbols.

--preserve-semi
Preserve unnecessary semicolons (such as right before a '}') This option
is useful when compressed code has to be run through JSLint (which is the
case of YUI for example)

--disable-optimizations
Disable all the built-in micro optimizations.Note: If no input file is specified, it defaults to stdin.

The following command line (x.y.z represents the version number):

java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.jswill minify the file myfile.js and output the file myfile-min.js. For more information on how to use the YUI Compressor, please refer to the documentation included in the archive.

The charset parameter isn't always required, but the compressor may throw an error if the file's encoding is incompatible with the system's default encoding. In particular, if your file is encoded in utf-8, you should supply the parameter.

java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js --charset utf-8

四、YUI Compressor 壓縮 JavaScript 的原理

YUI Compressor 壓縮 JavaScript 的內容包括：

1.移除注釋
2.移除額外的空格
3.細微優化
4.標識符替換（Identifier Replacement）

YUI Compressor 包括哪些細微優化呢？

• object["property"]，如果屬性名是合法的 JavaScript 標識符（註：合法的 JavaScript 標識符——由一個字母開頭，其後選擇性地加上一個或者多個字母、數字或下劃線）且不是保留字，將優化為： object.property
• {"property":123}，如果屬性名是合法的 JavaScript 標識符且不是保留字，將優化為 {property:123} （註：在對象字面量中，如果屬性名是一個合法的 JavaScript 標識符且不是保留字，並不強制要求用引號引住屬性名）。
• 'abcd/'efgh'，將優化為 "abcd'efgh"。
• "abcd" + "efgh"，如果是字元串相連接，將優化成 "abcdefgh"（註：所有在使用 YUI Compressor 的前提下，對於腳本中的字元串連接，使用連接符 「+」 的效率和可維護性最高）。
對於 JavaScript 最有效的壓縮優化，當屬標識符替換。

比如：

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

進行屬標識符替換後：

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

再移除額外的空格，最終成了：

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

YUI Compressor 標識符替換僅替換函數名和變數名，那哪些不能被替代呢？

1.原始值：字元串、布爾值、數字、null 和 undefined。一般來說字元串占的空間最多，而非數字字面量其次（true、false，null，underfinded）。
2.全局變數：window、document、XMLHttpRequest等等。使用最多的就是 document、window。
3.屬性名，比如：foo.bar。占據的空間僅次於字元串，」.」 操作符無法被代替，且 a.b.c 更加費空間。
4.關鍵字。經常被過度使用的關鍵字有：var、return。最好的優化方法：一個函數僅出現一次 var 和 return 關鍵字。
對於原始值、全局變數、屬性名的優化處理方式大致相同：任何字面量值、全局變數或者屬性名被使用超過 2 次（包括2次），都應該用局部變數存儲代替。

但有部分情況下是禁止使用標識符替換的：

1.使用 eval() 函數。解決方法：不使用或者創建一個全局函數封裝 eval()。
2.使用 with 語句。解決方法：方法同上。
3.JScript 的條件注釋。唯一解決的方法：不使用。
由於 YUI Compressor 是建立在 rhino interpreter 基礎上的，所以上述所有的優化都是安全的。

3. f12能查看 yui compressor壓縮後的js嗎

1、關於YUI Compressor
YUI Compressor – The Yahoo! JavaScript and CSS Compressor
The YUI Compressor is a JavaScript compressor which, in addition to removing comments and white-spaces, obfuscates local variables using the smallest possible variable name. This obfuscation is safe, even when using constructs such as 『eval』 or 『with』 (although the compression is not optimal is those cases) Compared to jsmin, the average savings is around 20%.
The YUI Compressor is also able to safely compress CSS files. The decision on which compressor is being used is made on the file extension (js or css)
對於大量使用JavaScript和CSS的AJAX應用來說，如果JavaScript和CSS大小很大，則傳輸到客戶端的時間會很久，網站性能不佳。而壓縮JavaScript和CSS是自然的事情（其中YUI Compressor的壓縮率大約為20%）；
大致就是這么個意思，其實我們只要關注YUI Compressor能實現什麼就行。

2、JAVA環境搭建（JDK）
JAVA請到這里下載：
http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html
JDK環境變數配置的步驟如下：
1.我的電腦–>屬性–>高級–>環境變數.
2.配置用戶變數:
a.新建 JAVA_HOME
C:\Program Files\Java\jdk1.7.0_11（JDK的安裝路徑）
b.在PATH變數後添加
%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin
3.測試環境變數配置是否成功：
開始–〉運行–〉CMD
鍵盤敲入： JAVA
出現相應的命令，而不是出錯信息，即表示配置成功！
至此，條件都准備好了。
3、右鍵集成YUI Compressor
右鍵集成的方法，我網路出一大把，其中有介紹利用Filemenu Tools工具的，操作相對簡單，只要安裝好這個軟體，並進行相關設置即可；不過在測試時，發現壓縮後的文件名不夠理想。
最後發現「瓊台博客」分享的「給YUI Compressor添加右鍵命令」最實用也最方便；
若有需要，可以移步至瓊台博客查看詳細教程；教程主要部分轉載如下：
三、下載 compressor.cmd 放到D:\yuicompressor文件夾里
四、新建一個 compressor.reg 文件輸入以下內容

Windows Registry Editor Version 5.00
[HKEY_CLASSES_ROOT\AllFilesystemObjects\shell]
[HKEY_CLASSES_ROOT\AllFilesystemObjects\shell\YUI Compressor]
[HKEY_CLASSES_ROOT\AllFilesystemObjects\shell\YUI Compressor\command]
@="D:\\yuicompressor\\compressor.cmd \"%1\""

五、使用記事本打開compressor.cmd
其中有一處」%JAVA_HOME%\bin\java.exe」 -jar 「%~dp0\build\yuicompressor-2.4.7.jar」 –charset UTF-8 「%~nx1″ -o 「%RESULT_FILE%」
這里的build\yuicompressor-2.4.7.jar 意思是相對於自己當前路徑的build路徑下的yuicompressor-2.4.7.jar 文件，一般你下載壓縮後這個文件通常放在build目錄里，無需修改，需要注意的是後面的版本號對應真實文件就好。
如你下載的是2.4.2版本，那麼你解壓後build目錄里的文件應該是yuicompressor-2.4.2.jar。
最後一處，就是 –charset UTF-8 了，這里我默認使用了UTF-8，如果使用GBK的請改成–charset GB18030就好
六、雙擊 compressor.reg 導入信息到注冊表，安裝完畢。找一個JS或CSS文件右鍵就會看到菜單了，只需要執行以下，即可生成壓縮版。
右鍵js文件，彈出的菜單里，有一個 YUI Compressor 選項，單擊它對選中的文件壓縮

4. ant yui 壓縮 js時 報錯

js變數定義的有問題，導致壓縮的時候替換變數名出錯，貼點[ERROR] 27:82:invalid property id
上來

5. bat批處理ECHO 處於關閉狀態是怎麼回事

bat批處理ECHO處於關閉狀態，是設置錯誤造成的，解決方法如下：

1、首先按【Win + R】快捷鍵打開【運行】對話框，輸入「cmd」後按Enter鍵。