.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條優化規則也能在開發的過程中引導着你處理和決策問題的方法，所以還是很有益處的。
文章有所疏漏和要補充的，請留言一起討論，也請關注后續的相關文章。
如果文章對你有點幫助，推薦一下吧，謝謝 :)