不可不知的 WEB 前端網站優化—— 雅虎 34 條軍規

不可不知的 WEB 前端網站優化—— 雅虎 34 條軍規

不得不說如今依然適用於大部分的網站

當年雅虎推薦了一套優化網站加載速度的34條法則（包括Yslow規則22條），如下是詳細說明。

1. Minimize HTTP Requests 減小 HTTP 請求

圖片、css、script、flash 等等這些都會增長 http 請求數，減小這些元素的數量就能減小響應時間。把多個JS、CSS在可能的狀況下寫進一個文件，頁面裏直接寫入圖片也是很差的作法，應該寫進CSS裏，利用 CSS sprites 將小圖拼合後利用background來定位。

2. Use a Content Delivery Network 利用CDN技術

CDN 確實是好東西，8過服務器提供商的這項服務通常是要收費的，我之前買的國內空間是有這個的可是我當時根本不知道啥用，如今沒了。。。

3. Add an Expires or a Cache-Control Header 設置頭文件過時或者靜態緩存

瀏覽器會用緩存來減小http請求數來加快頁面加載的時間，若是頁面頭部加一個很長的過時時間，瀏覽器就會一直緩存頁面裏的元素。不過這樣若是 頁面裏的東西變更的話就要更名字了，不然用戶端不會主動刷新，看本身衡量了~ 這項能夠經過修改.htaccess文件來實現。

4. Gzip Components Gzip 壓縮

Gzip格式是一種很廣泛的壓縮技術，幾乎全部的瀏覽器都有解壓Gzip格式的能力，並且它能夠壓縮的比例很是大，通常壓縮率爲85%。壓縮沒壓縮，能夠到 這裏 作下測試。

5. Put Stylesheets at the Top 把 CSS 放頂部

讓瀏覽者能儘早的看到網站的完整樣式。

6. Put Scripts at the Bottom 把 JS 放底部

網站呈現完畢後再進行功能設置，固然這些JS要在你的加載過程當中不影響內容表現。

7. Avoid CSS Expressions 避免CSS Expressions

CSS表達式很可怕，這個只被IE支持的東西執行時候的運算量很是大，你移動一下鼠標它都要進行重計算的，但有時候爲了作瀏覽器的兼容必需要用到這個||| IE6去死去死！

8. Make JavaScript and CSS External 將 JS 和 CSS 外鏈

前面講到了緩存這個事情，一些較爲公用的JS和CSS，咱們可使用外鏈的形式，譬如我就是從Google外鏈來的Jquery文件，若是個人瀏覽者在瀏覽別的使用了這個外鏈文件的網站時已經下載並緩存了這個文件，那麼他在瀏覽個人網站的時候就不須要再進行下載了！

9. Reduce DNS Lookups 減小 DNS 查找

貌似是要減小網站從外部調用資源，個人Google分析和picasa的外鏈圖片都算在裏面了。

10. Minify JavaScript and CSS 減少 JS 和 CSS 的體積

寫JS和CSS都是有技巧的，用最少的代碼實現一樣的功能，減小空白，加強邏輯性，用縮寫方式等等，固然也有很多工具也可以幫你實現這一點。

11. Avoid Redirects 避免重定向

再寫入連接時，雖然 http://www.test.com 和 http://www.test.com/ 僅有一個最後的 / 只差，可是結果是不一樣的，服務器須要花時間把前者重定向爲後者而後進行跳轉，這個要本身注意，也能夠在Apache裏用Alias 或者mod_rewrite或者DirectorySlash解決。

12. Remove Duplicate Scripts 刪除重複腳本

重複調用的代碼瀏覽器並不會識別忽略，而是會再次運算一遍，這固然是大大的浪費。

13. Configure ETags 配置 ETags

搞不清楚咋回事，總之我是在.htaccess裏把它刪除了。

14. Make Ajax Cacheable 緩存 Ajax

Ajax是實時響應的，在瀏覽器接收到新的數據前，舊的數據被緩存，這樣可以更好的提升效率。

15. Flush the Buffer Early 儘早的釋放緩衝

當用戶進行頁面請求時，服務器端須要花費200到500毫秒時間來拼合HTML，將寫在head與body之間，釋放緩衝，這樣能夠將文件頭先發送出去，而後再發送文件內容，提升效率。

16. Use GET for AJAX Requests 用 GET 方式進行 AJAX 請求

Get 方法和服務器只有一次交互（發送數據），而 Post 要兩次（發送頭部再發送數據）。

17. Post-load Components 延遲加載組件

最早加載必須的組件進行頁面初始化，而後再加載其餘，YUI Image Loader 是很好的例子。

18. Preload components 預加載組件

提早加載之後可能用到的東西，和延遲加載並不衝突，它的目的是爲後續請求提供更快的響應，參見 Google 首頁上的CSS sprites應用。

19. Reduce the Number of DOM Elements 減小 DOM 元素數量

複雜的頁面結構意味着更長的下載及響應時間，更合理更高效的使用標籤來架構頁面，是好的前端的必備條件。

20. Split Components Across Domains 跨域分離組件

頁面組件多個來源能夠增大你的平行下載量，但注意不要過多，超過2-4個域名會引發上面說到的DNS查找浪費。

21. Minimize the Number of iframes 減小 iframe 數量

須要更有效的利用 ifames。 iframe 優勢：有利於下載緩慢的廣告等第三方內容，安全沙箱，並行下載腳本 iframe 缺點：即便爲空也會有較大資源消耗，會阻止頁面的onload，非語義。

22. No 404 不要出現 404 頁面

站點自己裏（非搜索結果）出現404頁面，無心義的404頁面會影響用戶體驗而且會消耗服務器資源。

23. Reduce Cookie Size 減少 Cookie

Cookie在服務器及瀏覽器之間的經過文件頭進行交換，儘量減少Cookie體積，設置合理的過時時間，可以很好的提升效率。

24. Use Cookie-free Domains for Components 對組件使用無 Cookie 的域名

對靜態組件的Cookie讀取是一種浪費，使用另外一個無Cookie的域名來存放你的靜態組件式一個好方法，或者也能夠在Cookie中只存放帶www的域名。

25. Minimize DOM Access 減小 DOM 的訪問次數

JS訪問DOM是很慢的，儘可能不要用JS來設置頁面佈局。

26. Develop Smart Event Handlers 開發靈活的事件處理句柄

DOM樹上過多的元素被加入事件句柄的話，反應效率確定會低，YUI事件工具備一個 onAvailable 方法能夠幫助你靈活的設置DOM事件句柄

27. Choose <link> over @import 使用 <link> 而非 @import

在IE中使用@import就和在頁面底部用<link>同樣，咱們前面說要把<link>放頂部的。

28. Avoid Filters 避免過濾器的使用

若是須要Alpha透明，不要使用AlphaImageLoader，它效率低下並且只對IE6及如下的版本適用，用PNG8圖片。若是你非要使用，加上_filter以避免影響IE7+用戶。

29. Optimize Images 優化圖片

將你的GIF轉爲PNG8會是個減少體積的好辦法，另外有不少方法處理你的JPG及PNG圖片以達到優化效果。

30. Optimize CSS Sprites 優化 CSS Sprites

在CSS Sprites中豎直並儘可能緊湊的排列圖片，儘可能將顏色類似的圖片排在一塊兒，會減少圖片自己的大小及提升頁面圖片顯示速度。

31. Don’t Scale Images in HTML 不要在HTML中縮放圖片

圖片要用多大的就用多大的，1000X1000的圖片被width=」100″ height=」100″之後，自己的KB數是不會減小的。

32. Make favicon. ico Small and Cacheable 縮小 favicon. ico 的大小並緩存它

站點的瀏覽器ICO應該不是常常換吧，那就長時間的緩存它，而且最好控制在1K如下。

33. Keep Components under 25K 保證組件在 25K 如下

iPhone不能緩存25K以上的組件，而且這仍是要在被壓縮前。

34. Pack Components into a Multipart Document 將組件打包進一個多部分的文檔中

就好像在郵件中加入附件同樣，一個HTTP請求就夠了，可是這一技術須要確保你的代理支持，iPhone 就不支持。

關注我，下一篇介紹《使用 Chrome 開發者工具 performance 檢測頁面性能》～