原文網址:?http://lunax.info/archives/3090.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://lunax.info/arch 與 http://lunax.info/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 條。應該說具體引導性的內容還不夠詳細。逐漸會根據自己的理解補充上來。

轉載于:https://www.cnblogs.com/fangzhaolee/p/3277477.html

總結

以上是生活随笔為你收集整理的[转] Web前端优化之 内容篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。