準(zhǔn)備工作

根據(jù)文檔接入騰訊云RUM

檢查是否完成接入

部署已經(jīng)完成構(gòu)建的站點

console中鍵入<aegis>出現(xiàn)

即可

數(shù)據(jù)結(jié)果分析

針對首屏加載，需要注意的分為以下幾項：

1.網(wǎng)絡(luò)優(yōu)化

網(wǎng)絡(luò)的問題可以通過DNS優(yōu)化，CDN，后端的優(yōu)化

利用ping等工具 可以直觀了解到各個地區(qū)的速度情況

由于站點部署在中國香港，所以大陸西北地區(qū)速度會下降，解決辦法就是多部署幾個后端，然后負(fù)載均衡，必要的時候還要對網(wǎng)絡(luò)運營商進行分別解析，均衡

由于本站的后端是架設(shè)在騰訊云的對象存儲上的，所以對于地域的切換與管理比較靈活

對于未備案站點：華南地區(qū)優(yōu)化建議解析中國香港，華北地區(qū)建議解析俄羅斯

如果是備案站點：直接接入CDN，更靈活地改變地域性能以及速度，延遲

因為網(wǎng)絡(luò)一旦確定，就無法更改他的性能，而且受運營商和服務(wù)商的影響較大，但是對于用戶來說，網(wǎng)絡(luò)性能不是重點，因為合格的服務(wù)商，速度都不會太慢，大部分都在500ms以內(nèi)，本地有的可以到達(dá)10ms以內(nèi)

這個延遲也會影響性能，不斷地請求，數(shù)據(jù)量巨大，每個數(shù)據(jù)就得經(jīng)歷這一個個延遲，所以于網(wǎng)絡(luò)優(yōu)化對前端性能優(yōu)化數(shù)據(jù)也是至關(guān)重要的

2.資源

除了延遲，網(wǎng)絡(luò)速度也是很重要的一關(guān)，由于html的特性，資源都是由文檔上往下同步加載，即加載完A再加載B，比如

若資源A耗時0.1s，資源B耗時0.2s，資源C耗時0.5s，總共加起來就是0.8s

首屏速度最關(guān)鍵的是LCP，也就是框架加載出來的時間，這對index要求很高，如果大塊文件在index太慢，則會拖慢速度

在后端的index，一般100k以內(nèi)最好

如果是php渲染的index，不僅加載的時候會占用服務(wù)器后端資源，前端也會一片空白，非常緩慢，就如WordPress和hexo兩者性能一樣

例如這一段代碼

他的加載順序如下：

當(dāng)我們打開頁面時，先加載了header最頂端的Script，同時CSS異步加載

當(dāng)JavaScript加載完成時開始加載DOM，同時CSS繼續(xù)渲染

DOM的加載也是從上到下，先到最大的div，再依次加載

圖片和視頻是大文件，html可以讓他們異步加載，所以圖中video實際上是dom的加載，資源的加載在后面的互動資源加載

LCP不記錄后面資源的加載，所以這一步video對LCP性能影響不大，影響的是img，因為img需要顯示出圖片才算加載完框架了，而video則是根據(jù)用戶設(shè)置的寬高就算加載完

到這里整個頁面已經(jīng)出來了

$(document).ready()方法也開始執(zhí)行，H1開始渲染出內(nèi)容“我永遠(yuǎn)喜歡薇爾莉特”

視頻和圖片在這里占據(jù)大量的資源，如果不是在最頭部或者很重要的話，建議加上 preload="none" 屬性，等待用戶手動操作再加載，這樣就不會占用其他資源加載的時間了

JavaScript代碼，如果是jQuery這類要在頁面沒加載前執(zhí)行的，可以放在頭部；如果是用戶觸發(fā)才執(zhí)行或者是插件的話，建議放在body外面，先加載完dom再加載腳本，減少dom渲染時間

同樣地，因為每次加載都要請求一遍，所以這些小資源盡量做成一個bundle，即一堆js寫在一個js里面，不然每次都需要請求請求請求，占據(jù)大量時間

很多很多的小圖片，也建議像上面的方法進行處理，變成一張大圖，后續(xù)通過background位置去調(diào)整要顯示的地方

3.渲染性能

后續(xù)用戶會點擊視頻，點擊的時候就會觸發(fā)加載，互動事件啟動

如果是JavaScript在計算的，由于JavaScript原生異步，所以只按照時長最長的事件計算時間

同步部分繼續(xù)計時（延遲操作setTimeout或者計時器setInterval除外）

少用PHP等占大內(nèi)存的腳本渲染大的html頁面，會造成資源浪費

能純前端盡量純前端，減少ajax造成的耗時

媒體大文件，無必要建議不預(yù)加載

為瀏覽器設(shè)置足夠合適的緩存

html建議2小時，css，視頻等不常更新的資源建議設(shè)置5天，這樣用戶重復(fù)加載的時候就不會從頭開始慢慢緩存

驗證

做好以上這些，可以大大提升前端性能，本網(wǎng)站

優(yōu)化前網(wǎng)絡(luò)：騰訊云對象存儲-中國香港直連 ?南方48ms ?北方100ms

優(yōu)化后網(wǎng)絡(luò)：騰訊云對象存儲-中國香港，俄羅斯，新加坡 ?20ms-80ms

優(yōu)化前LCP：8000ms

優(yōu)化后LCP：1500ms

總結(jié)

網(wǎng)絡(luò)優(yōu)化：多地區(qū)設(shè)置多解析，針對地域進行優(yōu)化

加載優(yōu)化：打包JavaScript，css，不必要腳本丟頁底

內(nèi)容優(yōu)化：減少不必要的DOM和視頻圖片預(yù)加載