Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的貢獻。廣為人知的優化規則也由 13 條到 14 條，再到 20 條，乃至現在的 34 條--真是與時俱進啊。最新的 34 條也針對不同的角度做了分類。
面向內容的優化規則目前有 10 條。
1. 盡量減少 HTTP 請求 (Make Fewer HTTP Requests)
作為第一條，可能也是最重要的一條。根據 Yahoo! 研究團隊的數據分析，有很大一部分用戶訪問會因為這一條而取得最大受益。有幾種常見的方法能切實減少 HTTP 請求：
1) 合並文件，比如把多個 CSS 文件合成一個；
2) CSS Sprites 利用 CSS background 相關元素進行背景圖絕對定位；參見：CSS Sprites: Image Slicing's Kiss of Death
3) 圖像地圖
4) 內聯圖象 使用 data: URL scheme 在實際的頁面嵌入圖像數據.
2. 減少 DNS 查找 (Reduce DNS Lookups)
必須明確的一點，DNS 查找的開銷是很大的。另外，我倒是覺得這是 Yahoo! 所有站點的通病，Yahoo！主站點可能還不夠明顯，一些分站點，存在明顯的類似問題。對於國內站點來說，如果過多的使用了站外的 Widget ，也很容易引起過多的 DNS 查找問題。
3. 避免重定向 (Avoid Redirects)
不是絕對的避免，盡量減少。另外，應該注意一些不必要的重定向。比如對 Web 站點子目錄的後面添加個 / (Slash) ，就能有效避免一次重定向。http://www.dbanotes.net/arch 與 http://www.dbanotes.net/arch/ 二者之間是有差異的。如果是 Apache 服務器，通過配置 Alias 或mod_rewrite 或是 DirectorySlash 能夠消除這個問題。
4. 使得 Ajax 可緩存 (Make Ajax Cacheable)
響應時間對 Ajax 來說至關重要，否則用戶體驗絕對好不到哪裡去。提高響應時間的有效手段就是 Cache 。其它的一些優化規則對這一條也是有效的。
5. 延遲載入組件 (Post-load Components)6. 預載入組件 (Preload Components)
上面兩條嚴格說來，都是屬於異步這個思想靈活運用的事兒。
7. 減少 DOM 元素數量 (Reduce the Number of DOM Elements)8. 切分組件到多個域 (Split Components Across Domains)
主要的目的是提高頁面組件並行下載能力。但不要跨太多域名，否則就和第二條有些沖突了。
9. 最小化 iframe 的數量 (Minimize the Number of iframes)
熟悉 SEO 的朋友知道 iframe 是 SEO 的大忌。針對前端優化來說 iframe 有其好處，也有其弊端，一分為二看問題吧。
10. 杜絕 http 404 錯誤 (No 404s)
對頁面鏈接的充分測試加上對 Web 服務器 error 日志的不斷跟蹤能有效減少 404 錯誤，亦能提升用戶體驗。值得一提的是，CSS 與 Java Script 引起的 404 錯誤因為定位稍稍"難"一點而往往容易被忽略。
這是內容篇的 10 條。應該說具體引導性的內容還不夠詳細。逐漸會根據自己的理解補充上來。
--EOF--
