背景
在開發好頁面後，如何讓頁面更快更好的執行，是區分一個程式猿技術水平和視野的一個重要指標。所以面試時，面試官總會問你一個問題，如何進行效能優化呢？
如果你這時是頭腦一片空白，或是像之前的我一樣，靠死記硬背或是之前的經歷，答一下壓縮程式碼，打包程式碼，雪碧圖，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，謝謝！
有時間的同學也可以看下我的文章大廠前端面試考什麼? ,應該也有幫助