問(wèn)題背景

創(chuàng)新互聯(lián)建站專注于企業(yè)成都全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、楊浦網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場(chǎng)景定制、商城網(wǎng)站制作、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為楊浦等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

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

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

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

從瀏覽器打開(kāi)到頁(yè)面渲染完成，花費(fèi)了多少時(shí)間

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

頁(yè)面加載時(shí)間監(jiān)控

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

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

DNS解析時(shí)間： domainLookupEnd - domainLookupStart

TCP建立連接時(shí)間： connectEnd - connectStart

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

渲染完成時(shí)間： domContentLoadedEventEnd - navigationStart

頁(yè)面onload時(shí)間： loadEventEnd - navigationStart

如果不使用該API，可以以服務(wù)器渲染返回的時(shí)間，或是SPA路由跳轉(zhuǎn)離開(kāi)的時(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ě)過(guò)別的協(xié)議，更好的是直接上http2。為了優(yōu)化鏈接的環(huán)節(jié)，前端這里還需要對(duì)資源使用cdn，雪碧圖，代碼合并等手段。

服務(wù)器處理請(qǐng)求這里可以優(yōu)化的點(diǎn)也不少，值得注意的就是移動(dòng)端訪問(wèn)PC端頁(yè)面需要跳轉(zhuǎn)到移動(dòng)端頁(yè)面時(shí)，要再服務(wù)器端使用302跳轉(zhuǎn)，不要在前端進(jìn)行跳轉(zhuǎn)。還有就是啟用hsts，要求瀏覽器在之后的訪問(wèn)使用https，減少無(wú)謂的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)文章！