1，減少http請求

    瀏覽器渲染頁面過程中，每發現有href,src標籤都會發送一次請求，所以我們要儘可能的合併css，js和圖片檔案，從而減少http請求次數。常用的解決方案如css sprites(css精靈圖)。而合併js，css檔案還有一個意想不到的好久，引用《高效能javascript》中的測試，下載一個100kb的單個js檔案會比下載4個25kb的js檔案要快，原因就是http請求會帶來額外的效能開銷。同時，設定快取也是減少http請求的一大法寶，我們可以把網站中很少變化的圖片資源通過HTTP 中的expires和cache-control設定快取，快取時間可以自己定義，這樣使用者再次開啟網站時，瀏覽器就會從快取中直接讀取資源，從而減少傳送http請求，關於快取的方法原理，這裡不多做介紹。

2，css檔案放在頭部，js檔案放在頁面的末端

    瀏覽器是按照自上而下的順序載入頁面的，因此，css檔案放在頭部可以更快的使頁面展現在使用者眼前，使使用者感覺頁面載入很快，反觀js檔案，瀏覽器載入完成js檔案時會立即執行js程式碼，造成資源阻塞。因此把js檔案放在底部，會使頁面更快的呈現出來。

3，使用外鏈的js，css檔案

    外鏈的檔案才可以使用瀏覽器快取，但有時為了減少http請求，可能會把樣式直接寫在頁面中，具體需要可自己權衡利弊使用。

4，壓縮，精簡css和js檔案

    以vuejs檔案為例，壓縮過的檔案比未壓縮的小了近200kb。同樣css檔案也是如此。除壓縮檔案外，我們還可以通話優化css樣式程式碼的方式，減小css檔案的程式碼量，此種優化雖然沒有程式碼壓縮帶來的效果明顯，但是卻也是不可或缺的。我們可以使css樣式程式碼的使用高度複用，從而減少多餘的程式碼。

5，避免空的src和href屬性

    當link標籤的href屬性為空、script標籤的src屬性為空的時候，瀏覽器渲染的時候會把當前頁面的URL作為它們的屬性值，從而把頁面的內容載入進來作為它們的值。所以要避免犯這樣的疏忽

6，能用get完成ajax請求的，請使用get請求

    當使用xmlHttpRequest時，瀏覽器中的POST方法是一個“兩步走”的過程：首先發送檔案頭，然後才傳送資料。因此使用GET獲取資料時會比post稍快一些。(此方法適用場景有限，請自己權衡兩種請求的利弊)

7，使用CDN

    網站靜態資源如css，js，圖片檔案使用CDN分發

8，避免404，

    外鏈的css，js檔案出現404時，會破壞瀏覽器的並行載入

 9，減小cookie體積，

    cookie包含在每次請求和響應中，因此cookie的大小會直接影響資料的傳輸速度，因此要儘量減少cookie的資料量。

10，提升css選擇器效能

    選擇器的執行效率由高到低依次為：id選擇器>類選擇器>標籤選擇器>相鄰選擇器(h1+p)>子選擇器(ul>li)>後代選擇器(ul li)>萬用字元選擇器(*)>屬性選擇器(input[type="text"])>偽類選擇器(a:hover),推薦看一篇關於如何提升css選擇器效能的文章。

11，減少dom操作

    頻繁的dom操作會大大影響頁面的效能，這裡推薦使用innerHTML代替document.createElement等一些原生dom操作，使用事件委託的方法，減少dom操作次數。

12，避免使用css表示式

    儘管css表示式現在已經近乎沒人使用了，但是在此還是提醒一下各位，css表示式雖然非常的強大，但是正是因為他的強大，所以帶來的就是對效能的嚴重消耗。

13，減少重排和重繪

    什麼時候會導致瀏覽器重繪，比如改變一個div的背景色，改變文字的顏色，那麼什麼時候會導致瀏覽器重排呢，比如改變div的大小。重排會導致瀏覽器重新對頁面佈局進行計算排布，因此帶來的效能消耗是非常大的，所以，我們要在開發中儘可能少的減小重排和重繪的次數。比如使用多次使用div.style方法修改元素樣式時，推薦把需要修改的樣式通過css寫出來，然後修改元素的className進行樣式修改操作。在此也推薦一篇關於哪些操作會引起瀏覽器的重排和重繪的文章。

14，推薦使用link標籤代替@import

    @import引入的樣式會在頁面載入完成後才載入，而link在頁面載入時會被同時載入，相容方面@import試css2.1的語法，link沒有相容性問題。