【Web優化】Yslow優化法則（彙總篇）

1、Make Fewer HTTP Requests （儘量減小http請求數）

http請求是要開銷的，減小請求數能夠提升網頁加載速度。經常使用的方法，合併css，js以及 Image maps和css sprites等。（css sprites是指只用將頁面上的背景圖合併成一張，而後經過background-position來取背景。）

更多請參考《【Web優化】Yslow優化法則（一）最小化HTTP請求數》

2、Use a Content Delivery Network （使用CDN 內容分發網絡)

經過在現有的Internet中增長一層新的網絡架構，將網站的內容發佈到最接近用戶的 cache服務器內，經過DNS負載均衡(可選根據時間或訪問速度來決定訪問哪臺服務器資源)的技術，判斷用戶來源就近訪問cache服務器取得所需的內容。這樣能夠有效減小數據在網絡上傳輸的時間，提升速度。

更多請參考《【Web優化】Yslow優化法則（二）使用CDN》

3、Add an Expires Header（添加Expires/cach-control頭）

如今愈來愈多的圖片，腳本，css，flash被嵌入到頁面中，當咱們訪問他們的時候勢必會作許屢次的http請求。其實咱們能夠經過設置 Expires header來緩存這些文件。Expire其實就是經過header報文來指定特定類型的文件在覽器中的緩存時間。大多數的圖片，flash在發佈後都是不須要常常修改的，作了緩存之後這樣瀏覽器之後就不須要再從服務器下載這些文件而是而直接從緩存中讀取，這樣再次訪問頁面的速度會大大加快。

不過時間也有過問題，特別是對於腳本過時時間的設置仍是應該仔細考慮下，否則相應的腳本功能更新後客戶端可能要過很長一段時間才能「感知」到這樣的變化。因此，哪些應該緩存，哪些不應緩存仍是應該仔細斟酌一番。

關於此的更多內容請參考《【Web優化】Yslow優化法則（三）添加緩存控制首部》

 4、Gzip Components（啓用gzip壓縮）
Gzip的思想就是把文件（  html ,php, js, css, xml, txt…）先在服務器端進行壓縮，而後再傳輸。這樣能夠顯著減小文件傳輸的大小。傳輸完畢後瀏覽器會從新對壓縮過的內容進行解壓縮，並執行。

 5、Put Stylesheets at the Top(將css放在頁面最上面)

  不管是HTML仍是XHTML仍是CSS都是解釋型的語言，而非編譯型的，因此CSS到上方的話，那麼瀏覽器解析結構的時候，就已經能夠對頁面進行渲染，這樣就不會出現，頁面結構光禿禿的先出來，而後CSS渲染，頁面又忽然華麗起來，這樣太具備「戲劇性」的頁面瀏覽體驗了。
咱們發現把樣式表移到HEAD部分能夠提升界面加載速度，所以這使得頁面元素能夠順序顯示。
在不少瀏覽器下，如IE，把樣式表放在document的底部的問題在於它禁止了網頁內容的順序顯示，瀏覽器阻止顯示以避免重畫頁面元素，那用戶只能看到空白頁了，Firefox不會阻止顯示，但這意味着當樣式表下載後，有些頁面元素可能須要重畫，這致使閃爍問題。
HTML規範明確要求樣式表被定義在HEAD中，所以，爲避免空白屏幕或閃爍問題，最好的辦法是遵循HTML規範，把樣式表放在HEAD中。
對此，馬海祥的建議是：目前尚未碰到把樣式表放在文檔後面的狀況吧？

 6、Put Scripts at the Bottom（將script放在頁面最下面）
將腳本放在頁面最下面的目的有那麼兩點： 一、由於防止script腳本的執行阻塞頁面的下載。在頁面loading的過程當中，當瀏覽器讀到js執行語句的時候必定會把它所有解釋完畢後在會接下來讀下面的內容。 因此放在頁面最後，能夠有效減小頁面可視元素的加載時間。        二、 腳本引發的第二個問題是它阻塞並行下載數量。
 7、Avoid CSS Expressions（避免在css中使用表達式）
CSS表達式是功能強大的(同時也是危險的)用於動態設置CSS屬性的方式，IE從版本5開始支持CSS表達式，如backgourd-color: expression((new Date()).getHours()%2?」#B8D4FF」:」#F08A00」)，即背景色每一個小時切換一次。
CSS表達式的問題是其執行次數超過大部分人的指望，不只頁面顯示和resize時計算表達式，並且當頁面滾屏，甚至當鼠標在頁面上移動時都會從新計算表達式。其實大部分能夠用js實現。
 8、Make JavaScript and CSS External（把javascript和css都放到外部文件中）
上述不少性能優化法則都基於外部文件進行優化，如今，咱們必須問一個問題：JavaScript和CSS應該包括在外部文件，仍是在頁面文件中？
  在現實世界中，使用外部文件會加快頁面顯示速度，由於外部文件會被瀏覽器緩存，若是內置JavaScript和CSS在頁面中雖然會減小HTTP請求次數，但增大了頁面的大小。
另一方面，使用外部文件，若是已經被瀏覽器緩存，則頁面大小會減少，同時又不增長HTTP請求次數。
所以，通常來講，外部文件是更可行的方式，惟一的例外是內嵌方式對主頁更有效，如Yahoo!和My Yahoo!都使用內嵌方式，通常來講，在一個session中，主頁訪問此時較少，所以內嵌方式能夠取得更快的用戶響應時間。
對此，馬海祥的建議是：ext2的代碼做了很好的引導，目前前端開發人員都很是注意客戶端模塊的封裝、重用，儘可能之外部JS的方式提升代碼的重用度，固然也要注意不要引入過多的外部資源，由於這違反了法則1。
目前CSS的封裝也不錯，可是主要是針對IE系列的解決方案，能夠考慮引入YAML、blueprint等CSS框架，輕鬆解決瀏覽器兼容性問題。
另外，馬海祥要提醒你們一點：把JavaScript和css文件放到外部，並不內嵌於網頁，同時能夠考慮把樣式表放到頭上把腳本文件放到底部。須要注意的是儘可能不要使用css的表達式，他很容易讓瀏覽器出現假死。
 9、Reduce DNS Lookups（減小DNS查詢）
在Internet上域名與IP地址之間是一一對應的，域名（kuqin.com）很好記，但計算機不認識，計算機之間的「相認」還要轉成ip地址。在網絡上每臺計算機都對應有一個獨立的ip地址。在域名和ip地址之間的轉換工做稱爲域名解析，也稱DNS查詢。一次DNS的解析過程會消耗20-120毫秒的時間,在dns查詢結束以前，瀏覽器不會下載該域名下的任何東西。因此減小dns查詢的時間能夠加快頁面的加載速度。yahoo的建議一個頁面所包含的域名數儘可能控制在2-4個。
 10、Minify JavaScript（壓縮 JavaScript）

最小化JavaScript代碼指在JS代碼中刪除沒必要要的字符，從而下降下載時間，兩個流行的工具是#JSMin和YUI Compressor。
混淆是最小化於源碼的備選方式，它經過刪除註釋和空格來減小源碼大小，同時它還能夠對代碼進行混淆處理，做爲混淆的一部分，函數名和變量名被替換成短的字符串，這使得代碼更緊湊，同時也更難讀，使得難於被反向工程，Dojo Compressor (ShrinkSafe)是最多見的混淆工具。
最小化是安全的、直白的過程，而混淆則更復雜，並且容易產生問題，從對國外10大網站的調查來看，經過最小化，文件可減小21%，而混淆則可減小25%（具體可查看馬海祥博客《推薦一種測試javascript執行性能和性能比較的方法》的相關介紹）。
除了最小化外部腳本文件外，內嵌的腳本代碼也應該被最小化，即便腳本根據法則4被壓縮後傳輸，最小化腳本刻減小文件大小5%或更高。
壓縮js和css的做用很顯然，減小頁面字節數。容量小頁面加載速度天然也就快。並且壓縮除了減小體積之外還能夠起到必定的保護左右。這點咱們作得不錯。經常使用的壓縮工具備JsMin、YUI compressor等。另外像 http://dean.edwards.name/packer/ 還給咱們提供了一個很是方便的在線壓縮工具。壓縮帶來的一個弊端就是代碼的可讀性沒了，可是在調試的時候，工具能夠將其復原，也就是調用本地的。

 11、Avoid Redirects（避免重定向）
 重定向功能是經過301和302這兩個HTTP狀態碼完成的，如：
HTTP/1.1 301 Moved Permanently
　　Location: http://mahaixiang.cn/newuri
　　Content-Type: text/html
瀏覽器自動重定向請求到Location指定的URL上，重定向的主要問題是下降了用戶體驗。
一種最耗費資源、常常發生而很容易被忽視的重定向是URL的最後缺乏/，如訪問http://www.mahaixiang.cn/astrology將被重定向到http://www.mahaixiang.cn/astrology/，在Apache下，能夠經過Alias，mod_rewrite或DirectorySlash等方式來解決該問題。
 12、Remove Duplicate Scripts （移除重複的腳本）
 十3、Configure ETags（配置實體標籤（ETags））

使用ETags減小Web應用帶寬和負載

關於此的更多內容請參考《【Web優化】Yslow優化法則（三）添加緩存控制首部》

十4、Make Ajax Cacheable（使 AJAX 緩存）作ajax請求的時候每每還要增長一個時間戳去避免他緩存。It's important to remember that "asynchronous" does not imply "instantaneous".（記住「異步」不是「瞬間」這一點很重要）。記住，即便AJAX是動態產生的並且只對一個用戶起做用，他們依然能夠被緩存。