前端性能優化原則

規則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：將javascript腳本放在底部

規則07：避免使用CSS表達式

CSS表達式是動態玩CSS的一種很強大的方式，可是強大的同時也存在很高的危險性。由於css表達式的頻繁求值會致使css表達式性能低下。若是真想玩css表達式，能夠選用只求值一次的表達式或者使用事件處理來改變css的值。

規則08：使用外部javascript和CSS

內聯js和css其實比外部文件有更快的響應速度，那爲何還要用外部呢？由於使用外部的js和css可讓瀏覽器緩存他們，這樣不只HTML文檔大小減小，並且不會增長HTTP請求數量。另外，使用外部js和css能夠提升組件的可複用性。

規則09：減小DNS查詢

DNS查詢有時間開銷，一般一個瀏覽器查找一個給定主機名的IP地址須要20-120ms。緩存DNS：緩存DNS查詢能夠很好地提升網頁性能，一旦緩存了DNS查詢，以後對於相同主機名的請求就無需進行再次的DNS查找，至少短期內不須要。因此在使用頁面中URL、圖片、js文件、css文件等時

規則10：精簡javascript

如何精簡？
其實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是否變化，若是變化了取最新的數據。