前端性能優(yōu)化有很多種，我們在實際工作中或許也就用到那么幾種。但是，在面試的時候，知道的不知道的，要說很多種，下面是我在工作學習中遇到的，不全，希望大家補充。
1、減少HTTP請求。
盡量合并圖片、CSS、JS。比如加載一個頁面，如果有5個css文件的話，那么會發(fā)出5次http請求，這樣會讓用戶第一次訪問你的頁面的時候會長時間等待。而如果把這個5個文件合成一個的話，就只需要發(fā)出一次http請求，節(jié)省網(wǎng)絡請求時間，加快頁面的加載。
2、把CSS放到頂部
因為網(wǎng)頁上的資源加載時從上網(wǎng)下順序加載的，所以css放在頁面的頂部能夠優(yōu)先渲染頁面，讓用戶感覺頁面加載很快。
3、把JS放到底部
js加載時同步加載，會對后續(xù)的資源造成阻塞，必須得等js加載完才去加載后續(xù)的文件 ，所以就把js放在頁面底部最后加載。
4、將CSS和JS放到外部文件中
目的是緩存文件。 但有時候為了減少請求，也會直接寫到頁面里，需根據(jù)PV和IP的比例權衡。
5、精簡CSS和JS
這里就涉及到css和js的壓縮了。比如一個css文件，把文件內(nèi)的空格回車全部去掉，減少文件的大小。grunt，glup都可以壓縮css、js文件。
gulp的使用方法在我的專欄-gulp學習筆記，圖文并茂，有需要的可以移步。
6、刪除重復的JS和CSS
重復調(diào)用腳本，除了增加額外的HTTP請求外，多次運算也會浪費時間。在IE和Firefox中不管腳本是否可緩存，它們都存在重復運算JavaScript的問題。
7、css選擇符優(yōu)化
因為css是從右向左解析的，根據(jù)這個規(guī)則，盡量使右邊的樣式唯一
8、避免空的src和href
當link標簽的href屬性和script標簽的src屬性為空時候，瀏覽器渲染的時候會把當前頁面的URL作為它們的屬性值，從而把頁面的內(nèi)容加載進來作為它們的值。所以要避免犯這樣的疏忽。
9、將CSS和JS放到外部文件中
這樣做的目的是緩存文件 但有時候為了減少請求，也會直接寫到頁面里，需根據(jù)PV和IP的比例權衡。
10、縮小favicon.ico并緩存
11、避免使用CSS表達式
舉個css表達式的例子
font-color:expression((new Date()).getHours()%3 ? "#fff" : "#aaa");
這個表達式會持續(xù)的在頁面上計算樣式，影響頁面的性能。并且css表達式只被IE支持。
12、緩存AJAX請求
異步請求同樣的造成用戶等待，所以使用ajax請求時，要主動告訴瀏覽器如果該請求有緩存就去請求緩存內(nèi)容。如下代碼片段, cache:true就是顯式的要求如果當前請求有緩存的話，直接使用緩存
異步請求同樣的造成用戶等待，所以使用ajax請求時，要主動告訴瀏覽器如果該請求有緩存就去請求緩存內(nèi)容。如下代碼片段, cache:true就是顯式的要求如果當前請求有緩存的話，直接使用緩存
$.ajax({
url : 'url',
dataType : "json",
cache: true,
success : function(son, status){},
error : function(){}
})
13、使用GET來完成AJAX請求
在安全性能要求允許的情況下，使用GET來完成AJAX請求。當使用XMLHttpRequest時，瀏覽器中的POST方法是一個“兩步走”的過程：首先發(fā)送文件頭，然后才發(fā)送數(shù)據(jù)。因此使用GET獲取數(shù)據(jù)時更加有意義。
15、減少DOM操作
因為每次操作DOM，都會帶來repaint和refolw
16、減少Cookie的大小
Cookie里面別塞那么多東西，因為每個請求都得帶著他跑。
17、使用CDN
網(wǎng)站上靜態(tài)資源即css、js全都使用cdn分發(fā)，圖片也一樣。
