問題背景
在開發好頁面後,如何讓頁面更快更好的運行,是區分一個程式猿技術水平和視野的一個重要指標。所以面試時,面試官總是會問你一個問題,如何進行表現最佳化呢?
效能最佳化是什麼?
從前端的角度來說,效能最佳化可以分成兩個方向。從使用者角度來看,一個是頁面載入的很快,另一個是頁面使用起來很流暢。因此,對效能最佳化的探索,我們可以分為頁面載入時間跟頁面運作效率兩個方向來進行研究。
(免費學習影片教學分享:php影片教學)
從瀏覽器開啟到頁面渲染完成,花了多少時間
#瀏覽器解析->查詢快取->dns查詢->建立連結->伺服器處理請求->伺服器發送回應->客戶端收到頁面->解析HTML->建立渲染樹->開始顯示內容(白屏時間)->首屏內容加載完成(首屏時間)->用戶可交互(DOMContentLoaded)->加載完成(load),如果我們要加載時間的優化,我們需要從這裡的每個步驟去思考,去總結,而避免東湊一點,西湊一點。
頁面載入時間監控
在對這些環節進行最佳化之前,我們需要知道監控這些環節花了多少時間。
可以取得到很多頁面載入相關的資料。比較常用的有
DNS解析時間:domainLookupEnd - domainLookupStart
TCP建立連線時間: connectEnd - connectStart
#白螢幕時間:r
esponseStart - navigationStartdom
# 渲染完成時間:domContentLoadedEventEnd - navigationStart
loadEventEnd - navigationStart
如果不使用該API,可以以伺服器渲染回傳的時間,或是SPA路由跳轉離開的時間為起點,domContentLoaded,load等事件為結束點進行記錄。或直接上google analytics。
伺服器部分最佳化要點
後端部分可以對緩存,dns查詢時間,連結時間,處理請求時間,回應時間等進行最佳化。 dns查詢時間可以使用httpdns或是dns預先加載,域名收斂等手段優化。 建立連線的重點是長連結和連結多用,keep-alive,long-polling,http-straming,websocket或是自己寫過別的協議,更好的是直接上http2。為了優化連結的環節,前端這裡還需要對資源使用cdn,雪碧圖,程式碼合併等手段。 伺服器處理請求這裡可以優化的點也不少,值得注意的就是行動端存取PC端頁面需要跳到行動裝置頁面時,要再伺服器端使用302跳轉,不要在前端進行跳轉。還有就是啟用hsts,要求瀏覽器在之後的存取使用https,減少無謂的http跳轉https,同時還可以防止ssl剝離攻擊,提升安全性。伺服器發送回應環節,可以使用Transfer-Encoding=chunked,多次回傳回應,具體操作查詢bigpipe。還有就是減少cookie的體積等等。
相關文章教學推薦:###php教學#######以上是php實現效能優化的詳細內容。更多資訊請關注PHP中文網其他相關文章!