我最近也經(jīng)常面試外包同事侧漓。面試的時(shí)候，總會(huì)有個(gè)問(wèn)題蛀醉，“你說(shuō)一下性能優(yōu)化的手段”悬襟。百分之八十的人都會(huì)說(shuō)，壓縮js和css之類的拯刁。顯然這些都是必須做的脊岳，而且已經(jīng)根本不是主要的性能優(yōu)化的關(guān)鍵點(diǎn)。如果你只會(huì)說(shuō)這些垛玻，只能說(shuō)明你是個(gè)過(guò)時(shí)的前端工程師割捅。
性能優(yōu)化過(guò)程中，我們需要面對(duì)的更多是DMS解析過(guò)程帚桩，服務(wù)器緩存和瀏覽器緩存機(jī)制亿驾。
gzip壓縮
在所有的web前端項(xiàng)目，靜態(tài)資源基本都放在cdn上账嚎，gzip的壓縮是非常必要的莫瞬，它直接改變了js文件的大小，減少兩到三倍郭蕉。
參考加速nginx: 開啟gzip和緩存疼邀，nginx的gzip配置非常簡(jiǎn)單，在你對(duì)應(yīng)的域名底下召锈，添加下面的配置旁振，重啟服務(wù)即可。gzip_comp_level的值大于2的時(shí)候并不明顯，建議設(shè)置在1或者2之間规求。
# 開啟gzip
gzip on;
# 啟用gzip壓縮的最小文件筐付，小于設(shè)置值的文件將不會(huì)壓縮
gzip_min_length 1k;
# gzip 壓縮級(jí)別，1-10阻肿，數(shù)字越大壓縮的越好瓦戚，也越占用CPU時(shí)間，后面會(huì)有詳細(xì)說(shuō)明
gzip_comp_level 2;
# 進(jìn)行壓縮的文件類型丛塌。javascript有多種形式较解。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding赴邻，建議開啟
gzip_vary on;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";
服務(wù)器緩存
為了提高服務(wù)器獲取數(shù)據(jù)的速度印衔，nginx緩存著靜態(tài)資源是非常必要的。如果是測(cè)試服務(wù)器對(duì)html應(yīng)該不設(shè)置緩存姥敛，而js等靜態(tài)資源環(huán)境因?yàn)槲募膊繒?huì)加上一個(gè)hash值奸焙，這可以有效實(shí)現(xiàn)緩存的控制。
location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ {
access_log off;
expires 30d;
}
location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
access_log off;
expires 24h;
}
location ~* ^.+\.(html|htm)$ {
expires 1h;
}
瀏覽器緩存
瀏覽器緩存是通過(guò)html的頭文件中的meta來(lái)控制彤敛。http-equiv是一個(gè)專門針對(duì)http的頭文件与帆，可以向?yàn)g覽器傳回一些有用的信息。與之對(duì)應(yīng)的content墨榄，是各個(gè)參數(shù)的變量值玄糟。
HTTP 1.0
在HTTP1.0中通過(guò)Pragma控制頁(yè)面緩存，可以設(shè)置為Pragma或no-cache袄秩。在不讓瀏覽器或中間緩存服務(wù)器緩存頁(yè)面的情況下阵翎，通常設(shè)置的值為no-cache，不過(guò)這個(gè)值不這么保險(xiǎn)之剧，通常還加上Expires置為0來(lái)達(dá)到目的郭卫。Expires可以用于設(shè)定網(wǎng)頁(yè)的到期時(shí)間。一旦網(wǎng)頁(yè)過(guò)期背稼，必須到服務(wù)器上重新傳輸獲取新的頁(yè)面信息箱沦。PS：內(nèi)容必須使用GMT的時(shí)間格式。
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
HTTP 1.1
在HTTP1.1中通過(guò)Cache-Control控制頁(yè)面緩存雇庙，可以設(shè)置為no-cache、private灶伊、no-store疆前、max-age或must-revalidate等，默認(rèn)為private聘萨。
<meta http-equiv="Cache-Control" content="no-cache">
- public 瀏覽器和緩存服務(wù)器都可以緩存頁(yè)面信息
- private 對(duì)于單個(gè)用戶的整個(gè)或部分響應(yīng)消息竹椒，不能被共享緩存處理。這允許服務(wù)器僅僅描述當(dāng)用戶的部分響應(yīng)消息米辐，此響應(yīng)消息對(duì)于其他用戶的請(qǐng)求無(wú)效
- no-cache 瀏覽器和緩存服務(wù)器都不應(yīng)該緩存頁(yè)面信息
- no-store 請(qǐng)求和響應(yīng)的信息都不應(yīng)該被存儲(chǔ)在對(duì)方的磁盤系統(tǒng)中胸完，不使用緩存
- must-revalidate 對(duì)于客戶機(jī)的每次請(qǐng)求书释，代理服務(wù)器必須想服務(wù)器驗(yàn)證緩存是否過(guò)時(shí)
- max-age 客戶機(jī)可以接收生存期不大于指定時(shí)間（以秒為單位）的響應(yīng)
- min-fresh 客戶機(jī)可以接收響應(yīng)時(shí)間小于當(dāng)前時(shí)間加上指定時(shí)間的響應(yīng)
Last-Modified和Etags
Last-Modified服務(wù)器端文件響應(yīng)頭，描述最后修改時(shí)間赊窥。當(dāng)瀏覽器再次進(jìn)行請(qǐng)求時(shí)爆惧，會(huì)向服務(wù)器傳送If-Modified-Since報(bào)頭，詢問(wèn)時(shí)間點(diǎn)之后資源是否被修改過(guò)锨能，從而區(qū)分200和304的請(qǐng)求狀態(tài)碼扯再，304則選擇瀏覽器緩存。
Etags不同的是址遇，ETag是根據(jù)實(shí)體內(nèi)容生成一段hash字符串熄阻，是標(biāo)識(shí)資源的狀態(tài)。它由服務(wù)端產(chǎn)生來(lái)判斷文件是否有更新倔约。
參考資料：
JS分包
前面說(shuō)的兩部分都可以說(shuō)是偏后端的活，如果真的從前端方面考慮浸剩，我們可能會(huì)分包入手钾军。正因?yàn)関ue的腳手架搭建的項(xiàng)目，webpack的配置當(dāng)中就包含了壓縮js乒省，css和html的壓縮巧颈。所以，當(dāng)我們的單頁(yè)面越做越大的情況下袖扛，首要的一步就是分包砸泛。
vue官方稱gzip壓縮后只有20kb，但是你普通的打包方式也有100kb蛆封，再加上你自己的邏輯代碼唇礁，整體包的體積也挺大的。直接影響首屏頁(yè)面加載的效率惨篱。下面介紹一下兩種分包的方法：
- external 把包排除盏筐，使用cdn資源
- dll 打包
vue，vuex和vue-router
在webpack配置文件中external設(shè)置砸讳，把這三個(gè)場(chǎng)用包排除這個(gè)操作琢融，主要是把這三個(gè)包從vendor.js分開。
最后當(dāng)然需要在html標(biāo)簽上添加上額外cdn的link或者script簿寂。
DLL打包
這種打包方式專門引用webpack官方的DllPlugin和DllReferencePlugin漾抬。DllPlugin會(huì)生成一個(gè)dll包的代碼指紋manifest，管理額外的打包常遂。而在項(xiàng)目生成的過(guò)程中纳令，DllReferencePlugin會(huì)參考manifest的內(nèi)容去打包。額外生成的js文件應(yīng)該被放置在vue項(xiàng)目的文件當(dāng)中的static文件夾底下，以便于代碼部署平绩。
參考PaicFE／vue-multi中的配置文件webpack.dll.config.js的寫法圈匆。
預(yù)加載
預(yù)加載技術(shù)（prefetch）是在用戶需要前我們就將所需的資源加載完畢，不是所有瀏覽器都支持捏雌，主要是Chrome瀏覽器跃赚。
DNS prefetch 分析這個(gè)頁(yè)面需要的資源所在的域名，瀏覽器空閑時(shí)提前將這些域名轉(zhuǎn)化為 IP 地址腹忽，真正請(qǐng)求資源時(shí)就避免了上述這個(gè)過(guò)程的時(shí)間来累。----HTML5 prefetch
由于域名轉(zhuǎn)換成為IP的過(guò)程是非常耗時(shí)的一個(gè)過(guò)程，DNS prefetch可以減少這部分的時(shí)間窘奏。
<meta http-equiv='x-dns-prefetch-control' content='on'>
<link rel='dns-prefetch' >
<link rel='dns-prefetch' >
<link rel='dns-prefetch' >
<link rel='dns-prefetch' >
<link rel='dns-prefetch' >
預(yù)加載也可以對(duì)某個(gè)靜態(tài)資源起到專門的作用嘹锁。
<link rel='subresource' href='libs.js'>
預(yù)渲染（pre-rendering）是這個(gè)頁(yè)面會(huì)提前加載好用戶即將訪問(wèn)的下一個(gè)頁(yè)面。
<link rel='prerender' >
vue組件keep-alive
如果你做用一個(gè)大型web的spa的時(shí)候着裹，你有很多router领猾，對(duì)應(yīng)的是很多個(gè)頁(yè)面。在頁(yè)面的快速切換中骇扇，為了保證頁(yè)面加載的效率摔竿，除了緩存機(jī)制之外，vue的keep-alive組件可以幫的上忙少孝。
它會(huì)把組件保存在瀏覽器內(nèi)存當(dāng)中继低，方便你快速切換。
百度的lavas項(xiàng)目中就在vue-router當(dāng)中使用keep-alive的組件稍走，用它包裹著router-view袁翁。使用了keep-alive的組件內(nèi)的數(shù)據(jù)將會(huì)保留，“是否需要重新同步數(shù)據(jù)”可以在vue-router的鉤子中路由所帶的參數(shù)執(zhí)行判斷婿脸。
Promise請(qǐng)求
es6的其中一個(gè)特性就是原生支持promise粱胜。在這里，我先不說(shuō)異步編程里的generator和aync/await的屬性狐树。它們功能的實(shí)現(xiàn)都是基于promise焙压。
Promise的特點(diǎn)在于：
- 減少回調(diào)函數(shù)
- 串并行處理
- 代碼的優(yōu)雅
這里特別講一下，ES6在性能優(yōu)化上可以使用promise或者async／await去壓縮請(qǐng)求時(shí)間抑钟。在過(guò)去涯曲，很多jquery的頁(yè)面在調(diào)用接口請(qǐng)求都是一個(gè)接口等另一個(gè)接口，串行執(zhí)行所有請(qǐng)求在塔，最后在完成最后的回調(diào)函數(shù)幻件，如此類推。這樣的寫法會(huì)直接導(dǎo)致“回調(diào)地獄”心俗。即使你用vue-resource，我也review到非常多的“回調(diào)地獄”的情況。為了從根本上解決這個(gè)問(wèn)題并提高開發(fā)效率城榛，我建議優(yōu)先使用promise揪利。（async／await不急著投入使用），考慮到還有很多同事還在高效地開發(fā)業(yè)務(wù)代碼狠持。
現(xiàn)在的vue-resource已經(jīng)支持promise的寫法疟位，為了更好地讓技術(shù)向后發(fā)展，我建議將pagekit/vue-resource替換稱為mzabriskie/axios和webmodules/jsonp喘垂。axios是可以同時(shí)滿足服務(wù)端和瀏覽器端甜刻，同構(gòu)的寫法有助于以后將技術(shù)棧往SSR（服務(wù)端渲染）發(fā)展。jsonp這個(gè)庫(kù)則是為了兼容jsonp的請(qǐng)求需要正勒，需要對(duì)它進(jìn)行了promise的封裝得院。
export function getJsonp(urlHost, key, data, _params) {
return new Promise((resolve, reject) => {
let url = urlHost + key;
if (data) url += `?${querystring.stringify({ ...data, temp: new Date().getTime() })}`;
const params = _params || { timeout: 15000 };
if (!params.timeout) params.timeout = 15000;
jsonp(url, params, (err, res) => {
if (err) {
reject(err);
} else {
resolve(res);
}
});
});
}
Promise的使用需要避免以下的寫法，
promise.then(function(value) {
// success
}, function(error) {
// failure
});
盡量使用鏈?zhǔn)綄懛ǎ?/p>
promise.then(function(value) {
// step1
}).then(function(value){
// step2
}).catch(function(value){
// failure
})
并行的操作主要是Promise.all()章贞，它可以將Promise操作的數(shù)組并行執(zhí)行完成然后在進(jìn)行串行的操作祥绞。Promise.race()則是返回并行請(qǐng)求中最先返回的請(qǐng)求的那個(gè)結(jié)果。它們的使用可以有效地壓縮數(shù)據(jù)獲取的時(shí)間鸭限。
