前端效能優化原則

規則01：儘量減少http請求

1.合併css sprites

規則02：使用內容發布網路（cdn的使用）

cdn的全稱是content delivery network，即內容分發網路。其目的是通過在現有的internet中增加一層新的網路架構，將**的內容發布到最接近使用者的網路"邊緣"，使使用者可以就近取得所需的內容，解決internet網路擁擠的狀況，提高使用者訪問**的響應速度。

規則03：新增expires頭

瀏覽器使用快取來減少http請求的資料，並減小http響應的大小，使頁面載入更快。html5快取

規則04：壓縮元件（使用gzip方式）

壓縮js,css

規則05：將css樣式表放在頂部

規則06：將j**ascript指令碼放在底部

規則07：避免使用css表示式

css表示式是動態玩css的一種很強大的方式，但是強大的同時也存在很高的危險性。因為css表示式的頻繁求值會導致css表示式效能低下。如果真想玩css表示式，可以選用只求值一次的表示式或者使用事件處理來改變css的值。

規則08：使用外部j**ascript和css

內聯js和css其實比外部檔案有更快的響應速度，那為什麼還要用外部呢？因為使用外部的js和css可以讓瀏覽器快取他們，這樣不僅html文件大小減少，而且不會增加http請求數量。另外，使用外部js和css可以提高元件的可復用性。

規則09：減少dns查詢

dns查詢有時間開銷，通常乙個瀏覽器查詢乙個給定主機名的ip位址需要20-120ms。快取dns：快取dns查詢可以很好地提高網頁效能，一旦快取了dns查詢，之後對於相同主機名的請求就無需進行再次的dns查詢，至少短時間內不需要。所以在使用頁面中url、、js檔案、css檔案等時

規則10：精簡j**ascript

如何精簡？

其實w3cfuns已經給大家準備好精簡js所需的所有工具「前端神器」，這點w3cfuns為大家做的很不錯，在這個規則裡我們就用到「js壓縮/混淆/美化工具」

最初始的精簡方式：就是移除不必要的字元減小js檔案大小，改善載入時間。包括所有的注釋、不必要的空白字元。

高階一點的精簡方式就是：混淆。

它不但會移除不必要的字元，還會改寫**，比如函式和變數的名字會被改成很短的字串，這樣使js**更簡練更難閱讀。

規則11：避免重定向

重定向的英文是redirect，用於將使用者從乙個url重新跳轉到另乙個url。

最常見的redirect就是301和302兩種。

關於重定向的效能影響這裡就不說了，自行查閱相關資料吧。

在我們實際開發中避免重定向最簡單也最容易被忽視的乙個問題就是，設定url的時候，最後的「/」，有些人有時候會忽略，其實你少了「/」，這時候的url就被重定向了，所以在給頁面鏈結加url的時候切記最後的「/」不可丟。

規則12：刪除重複指令碼

重複的js**除了有不必要的http請求之外，還會浪費執行js的時間。

將你使用的js**模組化，可以很好地避免這個問題，至於js模組化如何實現，現在有很多可以使用的開源框架。

規則13：配置etag

etag（entity tag），實體標籤，是web伺服器和瀏覽器使用者確認快取元件的有效性的一種機制。寫的很複雜，對我這種非專業的前端開發人員來說，有點過了，關於這個原則有興趣的自己看吧。

規則14：使ajax可快取

針對頁面中主動的ajax請求返回的資料要快取到本地，當然這個是針對短期內不會變化的資料。如果不確定資料變化週期的話，可以增加乙個修改標識的判斷，我正常處理過程中會給一些ajax請求返回的資料增加乙個md5值的判斷，每次請求會判斷當前md5是否變化，如果變化了取最新的資料。