優化網站設計系列文章總結和導讀

摘自：http://www.cnblogs.com/chenxizhang/archive/2013/05/20/3088196.html

 

概述

其實想寫這方面的文章由來已久，這個系列文章的想法是參照雅虎團隊提供的35條性能優化的最佳實踐（其實最先的時候是14條），再結合我本身多年的實際工做經驗，結合具體的開發平臺（ASP.NET），爲讀者提供既有理論知識、又有實踐指導的參考資料，對於優化而言，自己是一個長期細緻的工做（沒有所謂的銀彈），而且重在權衡利弊，選擇最適合本身項目狀況的解決方案。而要達到這樣的目標，就須要對網站設計優化有較爲系統的認識，知其然、也知其因此然，而後才能夠熟練地運用它們。

我從4月30日開始寫這個系列，到今天（5月20日）已經所有寫完，主要利用了假日、週末以及晚上的時間），雖然比較辛苦，但自認爲這個系列寫的質量算是我迄今爲止最好的，而且毫無疑問，我有理由藉此機會對個人家人的支持表示感謝。

在這個過程當中，我也對有關的知識溫故而知新，因此說我的收穫已經很大了，若是能對閱讀者也能有所幫助，那是再好不過的了。

導讀

這個系列的內容組織保持了雅虎團隊當年所提出的35條原則的結構，以便你們對照起來進行學習。值得一說的是，這些文檔雖然參照了原文，但不是對原文的翻譯，更多的是加入了個人一些看法以及演繹，有些地方可能還與原文有不太同樣的說明。

1. 優化網站設計（一）：減小請求數

2. 優化網站設計（二）：使用CDN

3. 優化網站設計（三）：對資源添加緩存控制

4. 優化網站設計（四）：對資源啓用壓縮

5. 優化網站設計（五）：在頂部放置樣式定義

6. 優化網站設計（六）：在文檔底部放置腳本定義或引用

7. 優化網站設計（七）：避免在CSS中使用表達式

8. 優化網站設計（八）：將腳本文件和樣式表做爲外部文件引用

9. 優化網站設計（九）：減小DNS查找的次數

10. 優化網站設計（十）：最小化JAVASCRIPT和CSS

11. 優化網站設計（十一）：避免重定向

12. 優化網站設計（十二）：刪除重複腳本

13. 優化網站設計（十三）：配置ETags

14. 優化網站設計（十四）：使AJAX調用盡量利用緩存特性

15. 優化網站設計（十五）：儘量早地發送緩衝區內容

16. 優化網站設計（十六）：爲AJAX請求使用GET方法

17. 優化網站設計（十七）：延遲或按需加載內容

18. 優化網站設計（十八）：預加載內容

19. 優化網站設計（十九）：減小DOM元素的數量

20. 優化網站設計（二十）：使用多個主機來平衡負載

21. 優化網站設計（二十一）：儘可能少用iframe

22. 優化網站設計（二十二）：避免404錯誤

23. 優化網站設計（二十三）：減少Cookie的體積

24. 優化網站設計（二十四）：經過使用不一樣的主機減小對cookie的使用

25. 優化網站設計（二十五）：避免對DOM元素進行過多操做

26. 優化網站設計（二十六）：設計「智能」的事件處理程序

27. 優化網站設計（二十七）：使用link而不是@import導入樣式表

28. 優化網站設計（二十八）：避免使用Filters(濾鏡)

29. 優化網站設計（二十九）：優化圖片

30. 優化網站設計（三十）：優化CSS sprites

31. 優化網站設計（三十一）：不要在頁面中縮放圖片

32. 優化網站設計（三十二）：使favicon.ico文件儘量小而且能夠緩存

33. 優化網站設計（三十三）：儘可能使單個內容體積小於25KB

34. 優化網站設計（三十四）：將組件直接打包到頁面

35. 優化網站設計（三十五）：避免將img的src屬性設置爲空白

 

權衡

我屢次提到權衡這個詞，就比如一個架構師被問到「什麼纔是最好的架構？」這樣的問題的時候，最合理的回答可能真的是「這個得看狀況」（雖然這樣的回答可能顯得有點像外交辭令），由於技術是不少的，架構也不少，沒有哪一個架構對全部業務場景都是合適的。

同理，咱們提到了不少原則，這些原則各自有它的側重點。很顯然，他們可能還互相有衝突。那麼，這能說明什麼呢？這難道說明這些原則不合理嗎？固然不是，正好相反，這纔是合理的。

爲了幫助你們更好地瞭解這些原則之間的關係，抑或是互斥的、抑或是互補的，我整理了一個表格以下，給你們參考。

 

圖中紅色標識出來的原則就是或多或少會有互斥的。遇到這些原則，你須要兼顧到其餘的原則，兩害相權取其輕，作出最適合於你的實際狀況的選擇。

沒有標識顏色的，標識這些原則是有互補性的，或者至少不衝突。

 

工具

我在編寫本系列文章的時候，用到以下的工具

1. 開發工具：Visual Studio 2012。我用的是2012，但若是想要跟着作練習，有2010也就能夠了。
   • http://www.microsoft.com/visualstudio/chs/downloads
2. 調試工具：
   1. Fiddler: ：http://fiddler2.com/home 這是一個獨立的網絡測試和調試工具。
   2. IE 自帶的開發工具（經過F12調出）：我用的是IE 10，最好你至少有 IE 9. http://msdn.microsoft.com/en-us/library/ie/gg589507(v=vs.85).aspx
   3. Chrome自帶的開發工具（經過F12調出）：使用最新版本便可。https://developers.google.com/chrome-developer-tools/
   4. Chrome中安裝的Yslow插件：https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
      • 關於Yslow的詳細信息（包括計分規則等）請參考：http://yslow.org/ruleset-matrix/
      • Google本身也開發了一個相似的插件(功能很像)：Page speed insights https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo/gplegfbjlmmehdoakndmohflojccocli

 

最後，但願這個系列文章對你們有些幫助！