小編推薦：Fundebug專注於JavaScript、微信小程式、微信小遊戲，Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務，眾多大佬公司都在使用。

前端效能優化有很多種，我們在實際工作中或許也就用到那麼幾種。但是，在面試的時候，知道的不知道的，要說很多種，下面是我在工作學習中遇到的，不全，希望大家補充。

1、減少HTTP請求。

儘量合併圖片、CSS、JS。比如載入一個頁面，如果有5個css檔案的話，那麼會發出5次http請求，這樣會讓使用者第一次訪問你的頁面的時候會長時間等待。而如果把這個5個檔案合成一個的話，就只需要發出一次http請求，節省網路請求時間，加快頁面的載入。

2、把CSS放到頂部

因為網頁上的資源載入時從上網下順序載入的，所以css放在頁面的頂部能夠優先渲染頁面，讓使用者感覺頁面載入很快。

3、把JS放到底部

js載入時同步載入，會對後續的資源造成阻塞，必須得等js載入完才去載入後續的檔案 ，所以就把js放在頁面底部最後載入。

4、將CSS和JS放到外部檔案中

目的是快取檔案。 但有時候為了減少請求，也會直接寫到頁面裡，需根據PV和IP的比例權衡。

5、精簡CSS和JS

這裡就涉及到css和js的壓縮了。比如一個css檔案，把檔案內的空格回車全部去掉，減少檔案的大小。grunt，glup都可以壓縮css、js檔案。
gulp的使用方法在我的專欄-

6、刪除重複的JS和CSS

重複呼叫指令碼，除了增加額外的HTTP請求外，多次運算也會浪費時間。在IE和Firefox中不管指令碼是否可快取，它們都存在重複運算JavaScript的問題。

7、css選擇符優化

因為css是從右向左解析的，根據這個規則，儘量使右邊的樣式唯一

8、避免空的src和href

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

9、將CSS和JS放到外部檔案中

這樣做的目的是快取檔案 但有時候為了減少請求，也會直接寫到頁面裡，需根據PV和IP的比例權衡。

10、縮小favicon.ico並快取

11、避免使用CSS表示式

舉個css表示式的例子

font-color:expression((new Date()).getHours()%3 ? "#fff" : "#aaa");

這個表示式會持續的在頁面上計算樣式，影響頁面的效能。並且css表示式只被IE支援。

12、快取AJAX請求

非同步請求同樣的造成使用者等待，所以使用ajax請求時，要主動告訴瀏覽器如果該請求有快取就去請求快取內容。如下程式碼片段, cache:true就是顯式的要求如果當前請求有快取的話，直接使用快取
非同步請求同樣的造成使用者等待，所以使用ajax請求時，要主動告訴瀏覽器如果該請求有快取就去請求快取內容。如下程式碼片段, cache:true就是顯式的要求如果當前請求有快取的話，直接使用快取

  $.ajax({
  url : 'url',
  dataType : "json",
  cache: true,
  success : function(son, status){},
  error : function(){}
})

13、使用GET來完成AJAX請求

在安全效能要求允許的情況下，使用GET來完成AJAX請求。當使用XMLHttpRequest時，瀏覽器中的POST方法是一個“兩步走”的過程：首先發送檔案頭，然後才傳送資料。因此使用GET獲取資料時更加有意義。

15、減少DOM操作

因為每次操作DOM，都會帶來repaint和refolw

16、減少Cookie的大小

Cookie裡面別塞那麼多東西，因為每個請求都得帶著他跑。

17、使用CDN

網站上靜態資源即css、js全都使用cdn分發，圖片也一樣。

連結：https://www.jianshu.com/p/340951fd83bf

關於Fundebug

Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了9億+錯誤事件，得到了Google、360、金山軟體、百姓網等眾多知名使用者的認可。歡迎免費試用！