當面試官問你如何進行性能優化時，你該這麼回答

更新

寫了更新的文章 從負一步開始的性能優化，歡迎你們關注瀏覽，有收穫的話但願能夠star一下 個人博客

背景

在開發好頁面後，如何讓頁面更快更好的運行，是區分一個程序猿技術水平和視野的一個重要指標。因此面試時，面試官總會問你一個問題，如何進行性能優化呢？

若是你這時是頭腦一片空白，或是像以前的我同樣，靠死記硬背或是以前的經歷，答一下壓縮代碼，打包代碼，雪碧圖，cdn，事件代理，這說明你對性能優化仍是缺少一個總體，系統的掌握，對性能優化還只是處於據說過一個方法就加上去的階段。這樣也就無從去更好的優化性能。

最近一個星期通過瘋狂的面試和查詢資料，我總算積累了一些經驗和思考，在這個招聘的黃金時間，分享給你們，但願你們能夠有一點收穫。若是有收穫，歡迎關注和star一下博客，github

性能優化是什麼

從前端的角度來講，性能優化能夠分爲兩個方向。從用戶角度來看，一個是頁面加載的很快，另外一個是頁面使用起來很流暢。所以，對性能優化的探索，咱們能夠分爲頁面加載時間跟頁面運行效率兩個方向來進行研究

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

是的，這個問題有點熟悉，面試官比較常問的是從瀏覽器打開到頁面渲染完成，發生了什麼事情。這個問題網上不少回答，我也不就重複的細說了。主要的過程是：

瀏覽器解析->查詢緩存->dns查詢->創建連接->服務器處理請求->服務器發送響應->客戶端收到頁面->解析HTML->構建渲染樹->開始顯示內容(白屏時間)->首屏內容加載完成(首屏時間)->用戶可交互(DOMContentLoaded)->加載完成(load)

很顯然，若是咱們要進行加載時間的優化，咱們須要從這裏的每個步驟都去思考，去總結，而避免東湊一點，西湊一點。

頁面加載時間監控

有一句話說得好，If You Can't Measure It, You Can't Manage It。在對這些環節進行優化以前，咱們須要知道如何監控這些環節花費了多少時間。

首先推薦一個PerformanceTiming,能夠獲取到不少頁面加載相關的數據。 比較經常使用的有

DNS解析時間： domainLookupEnd - domainLookupStart
TCP創建鏈接時間： connectEnd - connectStart
白屏時間： responseStart - navigationStart
dom渲染完成時間： domContentLoadedEventEnd - navigationStart
頁面onload時間： loadEventEnd - navigationStart

複製代碼

若是不使用該API，能夠以服務器渲染返回的時間，或是SPA路由跳轉離開的時間爲起點，domContentLoaded，load等事件爲結束點進行記錄。或是直接上google analytics。方法不少，就不細說了。

服務器部分優化要點

後端部分能夠對緩存，dns查詢時間，連接時間，處理請求時間，響應時間等進行優化。

緩存就不細說了。

dns查詢時間可使用httpdns或是dns預加載，域名收斂等手段優化。我還寫了篇介紹DNS和CDN的文章

創建鏈接的重點是長鏈接和連接複用，keep-alive，long-polling，http-straming，websocket或是本身寫過別的協議，更好的是直接上http2。爲了優化連接的環節，前端這裏還須要對資源使用cdn，雪碧圖，代碼合併等手段。

服務器處理請求這裏能夠優化的點也很多，值得注意的就是移動端訪問PC端頁面須要跳轉到移動端頁面時，要再服務器端使用302跳轉，不要在前端進行跳轉。還有就是啓用hsts，要求瀏覽器在以後的訪問使用https，減小無謂的http跳轉https，同時還能夠防止ssl剝離攻擊，提高安全性。

服務器發送響應環節，可使用Transfer-Encoding=chunked，屢次返回響應，具體操做查詢bigpipe。還有就是減少cookie的體積等等。

前端部分優化要點

前端部分能夠對白屏時間，首屏事件，可交換時間，加載完成時間進行優化。

-未完，待續-

博客文章連接web性能優化（一），github，歡迎star和follow，謝謝！

有時間的同窗也能夠看下個人文章大廠前端面試考什麼? ,應該也有幫助