上線前請先壓縮並優化你的 JavaScript 檔案

為了讓網站更符合使用者介面，AJAX 技術使得 javascript 被大量使用，但載入大量的 javascript 外部檔案（.js 文件檔）對於頁面顯示的速度影響甚多，上線前壓縮並優化 JavaScript 檔案，將可以改善這樣的情況，以下幾個做法提供給大家參考。

1. 合併 .js 文件檔

主要目的在於減少使用 <script> 標籤數量，當瀏覽器遇到一個這個標籤，就要啟動 javascript 分析引擎。這是一個很大的開銷，理想情況下是一個頁面只進行一次分析，所以儘可能合併 .js 文件檔，來改善這個情形。

2. 縮小及模糊化 .js 文件檔

縮小的意思就是刪除不必要的任何東西，如註解等；模糊化是更進一步的做法，主要是重新命名，重新安排功能和變數，以便它們的名字更短，模糊化不但可以使檔案更小，更是通常用來將 javascript 原始碼保密的一種方式。

JSMin 是一個對 javascript 縮小化非常好的工具，另外一個模糊化的工具就是 Packer，這兩個都是免費且很好用的工具。個人建議是先用 JSMin 將所有 .js 文件檔縮小合併，在使用 Packer 做模糊化的工作。以下有兩個範例供參考︰

jsMin.php︰
<br />include_once( 'class.jsmin.php' ); <br />$_arrFiles = array( 'script_1.js', 'script_2.js', 'script_3.js' );<br />$js_code = "";<br />foreach ($_arrFiles as $file) { <br /> $js_code .= JSMin::minify( file_get_contents( $file ) ) . "\n";<br />}<br />file_put_contents('scriptMin.js', $js_code);<br />
jsPacker.php︰
<br />include_once( 'class.JavaScriptPacker.php' ); <br />$js_code = file_get_contents( 'scriptMin.js' );<br />$Packer = new JavaScriptPacker($js_code, 'Normal', true, false);<br />$packed = $Packer->pack();<br />file_put_contents( 'scriptPacker.js', $packed );<br />
以上兩段程式的動作，就是將 script_1.js、script_2.js、script_3.js，先透過 JSMin 縮小合併產生 scriptMin.js，再用 Packer 模糊化產生 scriptPacker.js 這就是我們最終要的檔案。要注意的是在寫 js 程式時必須養成習慣，每個 function 結束後一定要有分號『;』，每個語句後面如果不是大括號括起來的，也一定要有分號。否則經過 Packer 模糊化後將無法正常執行。
<br />function sayHi(){<br /> alert('Hi!'); //語句後面如果不是大括號括起來需有分號<br />}; //function 結束後一定要有分號<br />
在之前的一個專案中，所有 .js 文件檔共有 13 個檔案 126KB，經過 JSMin 縮小合併後成為 1 個檔案 75KB，最後 Packer 所產生的檔案只有 45KB，如此 .js 文件檔縮小為原本的 36% 可見有多驚人。

3. 將 .js 文件檔放在頁面的底部

由於 .js 文件檔的性質可以改變頁面的任何東西，當瀏覽器遇到一個 <script> 標籤時，它會妨礙整個下載。知道一個 script 要下載分析了，便會優先下載 .js 文件檔進行分析完才會開始顯示網頁，在這之前使用者就只會看到白白的一片畫面。所以盡可能將 <script> 標籤擺在頁面的最底部 </body> 之前，如此便可讓使用者先看到部分畫面，而非一片空白等待著。