.NET性能調優系列文章
系列文章索引
- .NET性能調優之一：ANTS Performance Profiler的使用
- .NET性能調優之二：使用Visual Studio進行代碼度量
- .NET性能調優之三：YSlow相關規則的調優工具和方法
1.YSlow簡介
在這篇文章裡來談談web前端的相關優化，主要遵從
YSlow規則，具體的規則意義在
YSlow的23條規則描述裡已經描述的很清楚，不再贅述，那麼這裡主要來探讨下如何針對部分規則進行相關調優。
雅虎的Exceptional Performance Team整理出了針對web頁面進行性能改善的
34條規則，而YSlow從裡面提取出來了23條規則來指導開發者進行web頁面優化，常被稱為23條軍規，具有很強的指導意義。要知道，第一個開始做門戶類web網站并且當年做的風生水起的就是雅虎。
運作相關的YSlow插件對需要分析的網站分析後，插件會給出這個網站的整體評分和23條規則的詳細評分，以供開發者逐條優化，評分從A-F，分值越高（A最高F最低），說明與規則越貼合。
2.YSlow的使用
下面這張圖是YSlow提供的插件，按照自己的需要
下載下傳安裝即可。
以Chrome為例，打開需要分析的網站，安裝後點選插件工具欄的YSlow圖示運作分析後即可看到分析結果。
下面列出了YSlow的23條規則。
這裡暫且不去探讨如CDN等伺服器部署架構方面的内容，隻從代碼實作優化的角度去讨論這些規則。
- Minimize HTTP Requests
- Use a Content Delivery Network
- Avoid empty src or href
- Add an Expires or a Cache-Control Header
- Gzip Components
- Put StyleSheets at the Top
- Put Scripts at the Bottom
- Avoid CSS Expressions
- Make JavaScript and CSS External
- Reduce DNS Lookups
- Minify JavaScript and CSS
- Avoid Redirects
- Remove Duplicate Scripts
- Configure ETags
- Make AJAX Cacheable
- Use GET for AJAX Requests
- Reduce the Number of DOM Elements
- No 404s
- Reduce Cookie Size
- Use Cookie-Free Domains for Components
- Avoid Filters
- Do Not Scale Images in HTML
- Make favicon.ico Small and Cacheable
3.如何減少HTTP請求和CSS Sprite工具
減少HTTP請求的目的可以去檢視規則的詳細解釋，或者使用Chrome裡面開發者插件的Network功能請求一個網站後檢視資源請求的Timeline你就應該能明白了，這裡就不再贅述。
實作減少HTTP請求方面，資源檔案方面能做的就是合并操作了，包括CSS、JavaScript的合并，當然還包含圖檔的合并。
關于CSS、JavaScript的合并可以參見我之前的文章：
[前端優化]使用Combres合并對js、css檔案的請求而圖檔的合并最常用的方法就是CSS Sprite技術了，具體的原了解釋見
這裡。
這是網易首頁使用CSS Sprite技術合并後的圖檔。
網站如果在前期就使用CSS Sprite技術對圖檔進行了合并，開發起來還是挺友善的，而如果是開發好後再來整理零散的圖檔就會很麻煩，需要對齊圖檔像素、調整相關CSS樣式等。
還好有工具可以幫我們完成這樣的工作，這裡介紹一個線上生成CSS Sprite的工具：
CSS Sprite Generator将需要合并的圖檔壓縮成一個zip包上傳，并配置相關的選項。
點選生成按鈕後，即可生成對應的CSS和合并後的圖檔，紅線标注的部分就是CSS Sprite技術的精髓：通過圖檔的偏移實作顯示合并的圖檔上不同位置的小圖檔。
很簡單對嗎？為什麼還不動動手将你網站零散的圖檔進行合并來降低網站對伺服器的HTTP的請求呢？
4.GZIP壓縮和資源檔案壓縮
GZIP壓縮有時能達到80%左右的壓縮率，如果可以開啟（有些虛拟主機沒有權限開啟）就盡量開啟吧。
關于GZIP的詳細設定、壓縮比較等内容可以參見我之前的文章：
IIS開啟GZIP壓縮效率對比及部署方法而關于CSS、JavaScript資源的壓縮可以參見我之前的文章：
[前端優化]使用Microsoft Ajax Minifier對資源檔案進行壓縮優化當然有很多方法、架構可以實作這類的功能，可以在了解了原理後自行搜尋相關文章。
5.CSS、JavaScript資源檔案相關
- 盡量不要使用CSS表達式，如background-color: expression((new Date()).getHours()%2?"#B8D4FF":"#F08A00") 這樣的内容，因為會帶來諸多的浏覽器性能問題。
- 不要有重複的腳本内容。
- AJAX使用緩存并盡量使用get進行請求。
6.圖檔相關
- 不要将src、href的屬性設定為空。
- 不要強制去縮放圖檔，如這樣的标簽<img width="100" height="100" src="mycat.jpg" alt="My Cat" /> 中的圖檔，就不要使用寬高大于100px的圖檔，不然會帶來如加載緩慢、圖檔模糊等問題。
- 不要使用太大的favicon.ico，推薦是1K以下并設定緩存。
7.結語
YSlow的23條規則基本包含了web前端優化的衆多細節，優化時各個規則突破，如果網站跑分等級能在C以上，最起碼從前端性能和SEO方面來說就很不錯了。
了解這23條優化規則也能在開發的過程中引導着你處理和決策問題的方法，是以還是很有益處的。
文章有所疏漏和要補充的，請留言一起讨論，也請關注後續的相關文章。
如果文章對你有點幫助，推薦一下吧，謝謝 :)
作者：
Parry出處：
http://www.cnblogs.com/parry/本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。