問題背景
成都創(chuàng)新互聯(lián)公司專注于惠東網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供惠東營(yíng)銷型網(wǎng)站建設(shè),惠東網(wǎng)站制作、惠東網(wǎng)頁設(shè)計(jì)、惠東網(wǎng)站官網(wǎng)定制、微信平臺(tái)小程序開發(fā)服務(wù),打造惠東網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供惠東網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。在開發(fā)好頁面后,如何讓頁面更快更好的運(yùn)行,是區(qū)分一個(gè)程序猿技術(shù)水平和視野的一個(gè)重要指標(biāo)。所以面試時(shí),面試官總會(huì)問你一個(gè)問題,如何進(jìn)行性能優(yōu)化呢?
性能優(yōu)化是什么?
從前端的角度來說,性能優(yōu)化可以分為兩個(gè)方向。從用戶角度來看,一個(gè)是頁面加載的很快,另一個(gè)是頁面使用起來很流暢。因此,對(duì)性能優(yōu)化的探索,我們可以分為頁面加載時(shí)間跟頁面運(yùn)行效率兩個(gè)方向來進(jìn)行研究。
從瀏覽器打開到頁面渲染完成,花費(fèi)了多少時(shí)間
瀏覽器解析->查詢緩存->dns查詢->建立鏈接->服務(wù)器處理請(qǐng)求->服務(wù)器發(fā)送響應(yīng)->客戶端收到頁面->解析HTML->構(gòu)建渲染樹->開始顯示內(nèi)容(白屏?xí)r間)->首屏內(nèi)容加載完成(首屏?xí)r間)->用戶可交互(DOMContentLoaded)->加載完成(load),如果我們要進(jìn)行加載時(shí)間的優(yōu)化,我們需要從這里的每一個(gè)步驟都去思考,去總結(jié),而避免東湊一點(diǎn),西湊一點(diǎn)。
頁面加載時(shí)間監(jiān)控
在對(duì)這些環(huán)節(jié)進(jìn)行優(yōu)化之前,我們需要知道監(jiān)控這些環(huán)節(jié)花費(fèi)了多少時(shí)間。
可以獲取到很多頁面加載相關(guān)的數(shù)據(jù)。比較常用的有
DNS解析時(shí)間: domainLookupEnd - domainLookupStart
TCP建立連接時(shí)間: connectEnd - connectStart
白屏?xí)r間: r
esponseStart - navigationStartdom
渲染完成時(shí)間: domContentLoadedEventEnd - navigationStart
頁面onload時(shí)間: loadEventEnd - navigationStart
如果不使用該API,可以以服務(wù)器渲染返回的時(shí)間,或是SPA路由跳轉(zhuǎn)離開的時(shí)間為起點(diǎn),domContentLoaded,load等事件為結(jié)束點(diǎn)進(jìn)行記錄。或是直接上google analytics。
服務(wù)器部分優(yōu)化要點(diǎn)
后端部分可以對(duì)緩存,dns查詢時(shí)間,鏈接時(shí)間,處理請(qǐng)求時(shí)間,響應(yīng)時(shí)間等進(jìn)行優(yōu)化。
dns查詢時(shí)間可以使用httpdns或是dns預(yù)加載,域名收斂等手段優(yōu)化。
建立連接的重點(diǎn)是長(zhǎng)連接和鏈接復(fù)用,keep-alive,long-polling,http-straming,websocket或是自己寫過別的協(xié)議,更好的是直接上http2。為了優(yōu)化鏈接的環(huán)節(jié),前端這里還需要對(duì)資源使用cdn,雪碧圖,代碼合并等手段。
服務(wù)器處理請(qǐng)求這里可以優(yōu)化的點(diǎn)也不少,值得注意的就是移動(dòng)端訪問PC端頁面需要跳轉(zhuǎn)到移動(dòng)端頁面時(shí),要再服務(wù)器端使用302跳轉(zhuǎn),不要在前端進(jìn)行跳轉(zhuǎn)。還有就是啟用hsts,要求瀏覽器在之后的訪問使用https,減少無謂的http跳轉(zhuǎn)https,同時(shí)還可以防止ssl剝離攻擊,提升安全性。
服務(wù)器發(fā)送響應(yīng)環(huán)節(jié),可以使用Transfer-Encoding=chunked,多次返回響應(yīng),具體操作查詢bigpipe。還有就是減小cookie的體積等等。
以上就是php實(shí)現(xiàn)性能優(yōu)化的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章!