雅虎付出的34條網站加速方法

標籤：style   http   java   使用   os   strong   檔案   io   

雅虎給出的34條網站加速方法

　雅虎給出了最佳化網站載入速度的34條法則（包括Yslow規則22條） 詳細說明，下載轉寄 ponytail 的譯文（來自帕蘭映像）。
　　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. today-s-ooxx. com”和”http://www. today-s-ooxx. 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 404s 不要出現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就不支援。