YSlow[轉：福士點評]

最近在進行福士點評網的網站前端重構，目前已經完成了部分頁面。由原來的DIY JS和jQuery JS改為mootools，頁面結構也更加規範，減少css和js檔案的引用。

今天是一個比較重要的版本更新，雖然之前很有信心，但是上線後還是使用YSlow評測了下，好訊息，重構的頁面都是95分+，絕大部分都是99分，A級。(很多人問那一分丟在那裡，看這裡)

YSlow 是Yahoo開發人員團隊發布的一款基於Firebug的外掛程式。用於分析網頁，並根據一些高效能網站的規則進行相應的評級打分，對於網頁效能最佳化有很好的協助作用，告訴你那些部分影響了你的網頁速度，Why Slow！！

主要規則有13條，其中11條比較關鍵：

1. Make fewer HTTP requests--更少的http請求，也就是說頁面中盡量少的引用外部靜態資源，js、css以及圖片
2. Use a CDN--使用CDN網路，將頁面中的靜態資源分布到離使用者最近的網路節點上
3. Add an Expires header--為靜態資源檔案增加到期時間，讓使用者通過本機快取來更快的訪問網站
4. Gzip components--壓縮靜態資源內容，減少網路傳輸時間
5. Put CSS at the top--將CSS放在頁面頭部，能夠更快渲染頁面
6. Put JS at the bottom--將JS放在頁面底部，一般情況下JS的下載是阻塞模式的，放在頁面頂部會阻塞其他資源的下載
7. Avoid CSS expressions--不要使用CSS運算式，因為CSS運算式需要很多資源，有時甚至會造成頁面假死
8. Make JS and CSS external--將CSS和JS使用外部的獨立檔案，這點有點和1衝突，但是仔細分析下，並不矛盾
9. Reduce DNS lookups--減少DNS尋找（這點我後面詳細解釋下）
10. Minify JS--最小化壓縮JS，和第4點不同，使用YUI Compressor或者JSMin將JS檔案進行分析，將一些變數名變短，去除不必要的空格和符號
11. Avoid redirects--避免無意義的跳轉
12. Remove duplicate scripts--去除重複的指令碼，不光是檔案，甚至是同功能的函數
13. Configure ETags--配置實體標籤（要說清楚這個問題就要引申出很多情況，不做展開了）

我們本身的確是使用了CDN，但是YSlow本身無法分析出是否使用了CDN，所以需要在config中設定一下。這樣一來除了第8項，其他都是A級。

再看看Safari的網路時間軸，除了這個討厭的、超大的 Google Analytics指令碼，本站的資源下載時間基本在1秒內就完成了。

詳細解釋下YSlow的第9點，減少DNS尋找。

通常情況下按照我們的理解，靜態資源檔案都是放在本網站目錄下的。由於以前大家的網路速度都不快，IE瀏覽器為了防止大量的http請求阻塞了網路連接，所以同一網域名稱下的http請求，只允許2個並發線程，所以這就導致我們看到有的頁面的圖片是逐步逐步顯示出來的。通過Safari的網路時間軸工具就能看出來。

顯而易見，為了突破這個限制，我們可以增加幾個網域名稱，從而增加並發下載，加快速度。

最好的方式是自己指定每個檔案的網域名稱，按照i1、i1、i2、i2、i3、i3、i1、i1的相片順序，但是同時還要考慮引用的檔案大小，進行合理的排列，這對於團隊開發就過於複雜了。我們使用了i1.dpfile.com、i2.dpfile.com和i3.dpfile.com三個網域名稱，然後在每個調用靜態資源檔案地方都是用函數調用：DianPing.Common.StaticFile("/s/js/g.mt.min.js")，函數會根據檔案進行hash，分配一個網域名稱，這樣就能最大化的散列靜態檔案的網域名稱，雖然有缺點，卻是比較平衡的方式。

就在我寫文章的同時，Figo仔細分析了YSlow的評分標準，找到我們丟失的一分原因，也是因為第9點。第9點滿分是100分，YSlow認為一個頁面上最合理的是2個以內網域名稱，每增加一個扣除5分，我們的頁面有4個網域名稱（www\i1\i2\i3），扣除了10分。這個佔總比例的1/12，所以四捨五入，被扣除了1分。（不過我認為這1分還是值得的，頁面加速很明顯，而且DNS尋找是可以緩衝噠～～～）

從Safari的網路時間軸工具上看到JS（橙色）的載入會阻塞其他資源的下載，所以我打算再獨立一個網域名稱j1.dpfile.com，專門載入JS檔案。

不管怎麼說，總體來說效能還是提升了不少。

現在靜態檔案使用的是Squid伺服器，接下來等存放裝置部署完畢，準備使用Nginx，直接提供服務，聽說效能會提高不少。