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

概述

其實想寫這方面的文章由來已久，這個系列文章的想法是參照雅虎團隊提供的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

 

最后，希望這個系列文章對大家有些幫助！