Web 前端最佳化最佳實務之內容篇

作者: Fenng | 可以轉載, 轉載時務必以超連結形式標明文章原始出處和作者資訊及著作權聲明
網址: http://www.dbanotes.net/web/best_practices_for_speeding_up_your_web_site_content.html

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 條。應該說具體引導性的內容還不夠詳細。逐漸會根據自己的理解補充上來。