前端性能優(yōu)化有很多種疫蔓，我們?cè)趯?shí)際工作中或許也就用到那么幾種含懊。但是，在面試的時(shí)候衅胀，知道的不知道的岔乔，要說(shuō)很多種，下面是我在工作學(xué)習(xí)中遇到的滚躯，不全雏门，希望大家補(bǔ)充。
1掸掏、減少HTTP請(qǐng)求茁影。
盡量合并圖片、CSS丧凤、JS募闲。比如加載一個(gè)頁(yè)面，如果有5個(gè)css文件的話息裸，那么會(huì)發(fā)出5次http請(qǐng)求蝇更，這樣會(huì)讓用戶第一次訪問(wèn)你的頁(yè)面的時(shí)候會(huì)長(zhǎng)時(shí)間等待沪编。而如果把這個(gè)5個(gè)文件合成一個(gè)的話，就只需要發(fā)出一次http請(qǐng)求年扩，節(jié)省網(wǎng)絡(luò)請(qǐng)求時(shí)間蚁廓，加快頁(yè)面的加載。
2厨幻、把CSS放到頂部
因?yàn)榫W(wǎng)頁(yè)上的資源加載時(shí)從上網(wǎng)下順序加載的相嵌，所以css放在頁(yè)面的頂部能夠優(yōu)先渲染頁(yè)面，讓用戶感覺(jué)頁(yè)面加載很快况脆。
3饭宾、把JS放到底部
js加載時(shí)同步加載，會(huì)對(duì)后續(xù)的資源造成阻塞格了，必須得等js加載完才去加載后續(xù)的文件 看铆，所以就把js放在頁(yè)面底部最后加載。
4盛末、將CSS和JS放到外部文件中
目的是緩存文件弹惦。 但有時(shí)候?yàn)榱藴p少請(qǐng)求，也會(huì)直接寫到頁(yè)面里悄但，需根據(jù)PV和IP的比例權(quán)衡棠隐。
5、精簡(jiǎn)CSS和JS
這里就涉及到css和js的壓縮了檐嚣。比如一個(gè)css文件助泽，把文件內(nèi)的空格回車全部去掉，減少文件的大小嚎京。grunt嗡贺，glup都可以壓縮css、js文件挖藏。
gulp的使用方法在我的專欄-gulp學(xué)習(xí)筆記暑刃，圖文并茂厢漩，有需要的可以移步膜眠。
6、刪除重復(fù)的JS和CSS
重復(fù)調(diào)用腳本溜嗜，除了增加額外的HTTP請(qǐng)求外宵膨，多次運(yùn)算也會(huì)浪費(fèi)時(shí)間。在IE和Firefox中不管腳本是否可緩存炸宵，它們都存在重復(fù)運(yùn)算JavaScript的問(wèn)題辟躏。
7、css選擇符優(yōu)化
因?yàn)閏ss是從右向左解析的土全，根據(jù)這個(gè)規(guī)則捎琐，盡量使右邊的樣式唯一
8会涎、避免空的src和href
當(dāng)link標(biāo)簽的href屬性和script標(biāo)簽的src屬性為空時(shí)候，瀏覽器渲染的時(shí)候會(huì)把當(dāng)前頁(yè)面的URL作為它們的屬性值瑞凑，從而把頁(yè)面的內(nèi)容加載進(jìn)來(lái)作為它們的值末秃。所以要避免犯這樣的疏忽。
9籽御、將CSS和JS放到外部文件中
這樣做的目的是緩存文件 但有時(shí)候?yàn)榱藴p少請(qǐng)求练慕，也會(huì)直接寫到頁(yè)面里，需根據(jù)PV和IP的比例權(quán)衡技掏。
10铃将、縮小favicon.ico并緩存
11、避免使用CSS表達(dá)式
舉個(gè)css表達(dá)式的例子
font-color:expression((new Date()).getHours()%3 ? "#fff" : "#aaa");
這個(gè)表達(dá)式會(huì)持續(xù)的在頁(yè)面上計(jì)算樣式哑梳，影響頁(yè)面的性能劲阎。并且css表達(dá)式只被IE支持。
12鸠真、緩存AJAX請(qǐng)求
異步請(qǐng)求同樣的造成用戶等待哪工，所以使用ajax請(qǐng)求時(shí)，要主動(dòng)告訴瀏覽器如果該請(qǐng)求有緩存就去請(qǐng)求緩存內(nèi)容弧哎。如下代碼片段, cache:true就是顯式的要求如果當(dāng)前請(qǐng)求有緩存的話雁比，直接使用緩存
異步請(qǐng)求同樣的造成用戶等待，所以使用ajax請(qǐng)求時(shí)撤嫩，要主動(dòng)告訴瀏覽器如果該請(qǐng)求有緩存就去請(qǐng)求緩存內(nèi)容偎捎。如下代碼片段, cache:true就是顯式的要求如果當(dāng)前請(qǐng)求有緩存的話，直接使用緩存
$.ajax({
url : 'url',
dataType : "json",
cache: true,
success : function(son, status){},
error : function(){}
})
13序攘、使用GET來(lái)完成AJAX請(qǐng)求
在安全性能要求允許的情況下茴她，使用GET來(lái)完成AJAX請(qǐng)求。當(dāng)使用XMLHttpRequest時(shí)程奠，瀏覽器中的POST方法是一個(gè)“兩步走”的過(guò)程：首先發(fā)送文件頭丈牢，然后才發(fā)送數(shù)據(jù)。因此使用GET獲取數(shù)據(jù)時(shí)更加有意義瞄沙。
15己沛、減少DOM操作
因?yàn)槊看尾僮鱀OM，都會(huì)帶來(lái)repaint和refolw
16距境、減少Cookie的大小
Cookie里面別塞那么多東西申尼，因?yàn)槊總€(gè)請(qǐng)求都得帶著他跑。
17垫桂、使用CDN
網(wǎng)站上靜態(tài)資源即css师幕、js全都使用cdn分發(fā)，圖片也一樣诬滩。
