問題背景

在開發(fā)好頁面后，如何讓頁面更快更好的運行，是區(qū)分一個程序猿技術(shù)水平和視野的一個重要指標(biāo)。所以面試時，面試官總會問你一個問題，如何進(jìn)行性能優(yōu)化呢？

性能優(yōu)化是什么？

從前端的角度來說，性能優(yōu)化可以分為兩個方向。從用戶角度來看，一個是頁面加載的很快，另一個是頁面使用起來很流暢。因此，對性能優(yōu)化的探索，我們可以分為頁面加載時間跟頁面運行效率兩個方向來進(jìn)行研究。

（免費學(xué)習(xí)視頻教程分享：php視頻教程）

從瀏覽器打開到頁面渲染完成，花費了多少時間

瀏覽器解析->查詢緩存->dns查詢->建立鏈接->服務(wù)器處理請求->服務(wù)器發(fā)送響應(yīng)->客戶端收到頁面->解析HTML->構(gòu)建渲染樹->開始顯示內(nèi)容(白屏?xí)r間)->首屏內(nèi)容加載完成(首屏?xí)r間)->用戶可交互(DOMContentLoaded)->加載完成(load)，如果我們要進(jìn)行加載時間的優(yōu)化，我們需要從這里的每一個步驟都去思考，去總結(jié)，而避免東湊一點，西湊一點。

頁面加載時間監(jiān)控

在對這些環(huán)節(jié)進(jìn)行優(yōu)化之前，我們需要知道監(jiān)控這些環(huán)節(jié)花費了多少時間。

可以獲取到很多頁面加載相關(guān)的數(shù)據(jù)。比較常用的有

DNS解析時間： domainLookupEnd - domainLookupStart

TCP建立連接時間： connectEnd - connectStart

白屏?xí)r間： responseStart - navigationStartdom

渲染完成時間： domContentLoadedEventEnd - navigationStart

頁面onload時間： loadEventEnd - navigationStart

如果不使用該API，可以以服務(wù)器渲染返回的時間，或是SPA路由跳轉(zhuǎn)離開的時間為起點，domContentLoaded，load等事件為結(jié)束點進(jìn)行記錄?；蚴侵苯由蟝oogle analytics。

服務(wù)器部分優(yōu)化要點

后端部分可以對緩存，dns查詢時間，鏈接時間，處理請求時間，響應(yīng)時間等進(jìn)行優(yōu)化。

dns查詢時間可以使用httpdns或是dns預(yù)加載，域名收斂等手段優(yōu)化。

建立連接的重點是長連接和鏈接復(fù)用，keep-alive，long-polling，http-straming，websocket或是自己寫過別的協(xié)議，更好的是直接上http2。為了優(yōu)化鏈接的環(huán)節(jié)，前端這里還需要對資源使用cdn，雪碧圖，代碼合并等手段。

服務(wù)器處理請求這里可以優(yōu)化的點也不少，值得注意的就是移動端訪問PC端頁面需要跳轉(zhuǎn)到移動端頁面時，要再服務(wù)器端使用302跳轉(zhuǎn)，不要在前端進(jìn)行跳轉(zhuǎn)。還有就是啟用hsts，要求瀏覽器在之后的訪問使用https，減少無謂的http跳轉(zhuǎn)https，同時還可以防止ssl剝離攻擊，提升安全性。

服務(wù)器發(fā)送響應(yīng)環(huán)節(jié)，可以使用Transfer-Encoding=chunked，多次返回響應(yīng)，具體操作查詢bigpipe。還有就是減小cookie的體積等等。

相關(guān)文章教程推薦：php教程