最佳化JavaScript和CSS經驗談

JavaScript和CSS最佳化的最佳化對於提高web網站的效能也是非常重要的。

在深入JavaScript代碼和講述每個最佳化功能之前，讓我們總體看看我們能採取措施的地方，這些地方當然都是對我們網站效能有重要改觀的地方。下面是關於提高JavaScript對網站效能影響的幾條指導方針：

1 合并.js檔案

2 縮小指令碼

3 將指令碼放在頁面的底部

4 移除複製

合并.js檔案

按照最基本的原則，你的目標應該是讓你的JavaScripts儘可能產生少的請求，理想情況下，這也意味著你應該只有一個.js檔案。這個任務就是將所有的.js指令檔放到一個檔案中去。

雖然在大多數的情況下，一個檔案的方法是被推薦的。但是有時候，你可以使用兩個指令檔，從中間受益：一個是當頁面一下載就需要的實現的功能，另外一個是等頁面裝完才需要的功能。另外一種情況就是當你的網站的多個頁面使用一直的功能指令碼的時候，兩個檔案或許是令人想要的。共用的指令碼應該儲存在一個檔案裡，不同頁面所需要的具體指令碼應該放在第二個檔案裡。

縮小或著模糊化指令碼

現在你已經合并了你的指令碼，你就可以著手縮小或者模糊化它們。縮小的意思就是刪除不必要的任何東西，如注釋等。模糊化是更進一步的做法，主要是重新命名，重安排功能和變數，以便它們的名字更短，雖然指令碼讀起來很晦澀。模糊化通常用來用來使得JavaScript原始碼保密的一種方式。然而你的指令碼在網上是可以獲得的，不可能100%保密。瞭解更多的關於縮小和模糊化的資訊，看Douglas Crockford關於這個話題的文章。。

通常說來，如果你已經對JavaScript進行了gzip，從檔案的大小來說，你就已經取得了很大的改進了，通過進行縮小和模糊化指令碼，你還會獲得小的益處。平均說來，gzip壓縮的話可以節省75-80%，而gzip和縮小化同時進行可以節省80-90%。另外，當你改變你的代碼進行縮小化或者模糊化的時候，你會有引入bug的風險。如果你不擔心別人偷取你的代碼，你可以忘掉進行模糊化，只需要合并和縮小化，後者甚至只是合并指令碼（但是應該一直gzip它們）。

一個對JavaScript縮小化非常好的工具就是JSMin。並外一個模糊化的工具就是Packer，一個免費的線上工具。

在開發網站的過程中，修改代碼進行合并和縮小化應該是一個額外的，單獨的步驟。在開發過程中，你因該使用多個.js檔案，只要你覺得順手就行，當你的網站準備開通的時候，你就將合并過的，縮小過的版本代替原來的。你可以開發一個工具來完成這個。下面，我已經引入了一個例子，這個例子中的小程式就會完成這個功能。它是一個命令列的指令碼，使用的是JSMin的PHP連接埠。
<?php
include jsmin.php;
array_shift($argv);

foreach ($argv AS $file) {
echo /* , $file, */;
echo JSMin::minify(file_get_contents($file)), "\n";
}
?>

非常簡單，不是嗎？你可以將它儲存為compress.php，以下面的方式運行：
$ php compress.php source1.js source2.js source3.js > result.js

這就會將source1.js, source2.js, 和 source3.js縮小並且合并成一個result.js檔案。

當你合并和縮小化成為網站開發過程的一個步驟時，上面這個指令碼就很有用了。另外，還有一個更懶的辦法，你可以看Ed Eliot的部落格和SitePoint的部落格，擷取更多的辦法。

許多第三方的JavaScript庫提供了它們未被壓縮和縮小的版本。你能下載並且使用那些縮小過的代碼，接下來只是需要處理自己的代碼。有時候需要記住的是第三方JavaScript庫的許可證。即使你合并和縮小你所有的指令碼，你應該在你的代碼旁邊保留著作權的說明。

將指令碼放在頁面的底部

關於JavaScript最佳化的第三條經驗法則就是指令碼因該放置在頁面的底部，儘可能的靠近</body>標籤。由於指令碼的性質（他們可以改變頁面的任何東西），當瀏覽器遇到一個<script>標籤時，它會妨礙整個下載。知道一個指令碼下載分析了，其它的下載才會啟動。

將指令碼放在底部是避免負面阻塞效應的一種方法。另外儘可能少使用<script>標籤的原因是瀏覽器沒遇到一個這個的標籤，他就要啟動JavaScript分析引擎。這是一個很大的開銷，理想情況下是一個頁面只進行一次分析。

移除重複指令碼

關於JavaScript最佳化的另外一個原則就是避免包括相同的指令碼兩次。這看起來是一個非常怪的建議，但是它確實存在：舉個例子，如果一個大的網站使用多了伺服器，這些伺服器都包括了JavaScript檔案，那麼他們中的兩個包含了同樣的JavaScript是完全有可能的。重複的指令碼能夠導致瀏覽器分析引擎啟動兩次，有時（一些IE版本）甚至請求檔案兩次。當你使用第三方JavaScript庫的時候，重複的指令碼可能會導致出現問題。