• 優(yōu)化重點(diǎn)頁(yè)面
  • 了解 fmp 的計(jì)算方式
    • 整體 fmp 計(jì)算公式
    • 需要注意的特殊情況
  • 找到重點(diǎn)頁(yè)面
    • 步驟1：分析小程序入口頁(yè)面是哪些
    • 步驟2：對(duì)待優(yōu)化的頁(yè)面分類
  • 代碼優(yōu)化

優(yōu)化重點(diǎn)頁(yè)面

了解 fmp 的計(jì)算方式

在我們要優(yōu)化頁(yè)面提升 fmp 之前，需要先了解下 fmp 是如何計(jì)算的。從前文小程序的啟動(dòng)流程得知 fmp 的起終范圍，需要注意的是：

創(chuàng)新互聯(lián)專注于企業(yè)網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣、網(wǎng)站重做改版、二七網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、商城網(wǎng)站開(kāi)發(fā)、集團(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ù)。

• 在小程序中 a 頁(yè)面跳轉(zhuǎn) b 頁(yè)面這種情況，不會(huì)被計(jì)算到 fmp 中。fmp 只適用于從小程序外部調(diào)起小程序并打開(kāi)頁(yè)面的場(chǎng)景（冷啟動(dòng)）。
• 渲染完首屏內(nèi)容后，系統(tǒng)內(nèi)核就會(huì)打 fmp 的點(diǎn)，不會(huì)等到把整個(gè)頁(yè)面都渲染完成再打點(diǎn)，所以提升 fmp 的關(guān)鍵就是想辦法盡早先渲染出首屏需要的內(nèi)容，并延后其他內(nèi)容的渲染。

整體 fmp 計(jì)算公式

整體 fmp 是通過(guò)將小程序每個(gè)頁(yè)面的 fmp 值做排序，選取80分位的 fmp 值。我們從開(kāi)發(fā)者平臺(tái)看到的上屏?xí)r長(zhǎng)，是通過(guò)這種計(jì)算方式得出的整體 fmp 值，后續(xù)對(duì)單頁(yè) fmp 的數(shù)據(jù)，也會(huì)開(kāi)放出來(lái)。

需要注意的特殊情況

• 白屏：是指因?yàn)槟撤N原因，頁(yè)面6s內(nèi)沒(méi)有展示內(nèi)容，則被判為白屏，此時(shí)不會(huì)被記錄到 fmp 中
• 空白頁(yè)面調(diào)起 NA 頁(yè)：比如進(jìn)入頁(yè)面后沒(méi)有內(nèi)容渲染，直接調(diào)起某些 NA 功能頁(yè)（如刷臉功能），此時(shí)不會(huì)被記錄到 fmp 中
• 骨架屏：超過(guò)一屏幕高度的骨架屏，也不會(huì)被當(dāng)做首屏完成來(lái)記錄 fmp

找到重點(diǎn)頁(yè)面

步驟1：分析小程序入口頁(yè)面是哪些

我們需要找到入口訪問(wèn)量大的頁(yè)面，這些是影響整體 fmp 的重點(diǎn)頁(yè)面。從開(kāi)發(fā)者平臺(tái)中找到目標(biāo)小程序的【數(shù)據(jù)分析-行為分析】，按入口頁(yè)次數(shù)排序后，我們就可以看到重點(diǎn)頁(yè)面。
重點(diǎn)頁(yè)面的數(shù)量，不同的小程序是不同的，需要從排序后的數(shù)據(jù)中具體分析。比如，可以計(jì)算出占整體 fmp 的90%的頁(yè)面都有哪些，這些頁(yè)面都是重點(diǎn)頁(yè)面。

步驟2：對(duì)待優(yōu)化的頁(yè)面分類

從上一步中，我們分析出了重點(diǎn)頁(yè)面，現(xiàn)在可以對(duì)待優(yōu)化的頁(yè)面大致分一下類，這樣可以更準(zhǔn)確的預(yù)估頁(yè)面的優(yōu)化收益。一般會(huì)分為幾種：

• 內(nèi)容超出首屏的頁(yè)面，按常規(guī)手段分析即可，一般優(yōu)化空間較大
• 內(nèi)容不足首屏的頁(yè)面，且頁(yè)面是直接渲染頁(yè)面，不需要 setData ，即 fcp 與 fmp 很接近，一般優(yōu)化空間不大
• webview 嵌套 h5 的頁(yè)面，fmp 主要以 h5 渲染完成為準(zhǔn)，基本沒(méi)有優(yōu)化空間

代碼優(yōu)化

除了前文中提到的各種優(yōu)化手段外，代碼優(yōu)化中還需要注意：

• 去掉頁(yè)面渲染過(guò)程中沒(méi)必要的 setTimeout
• 對(duì)每次調(diào)用結(jié)果都不變的同步端能力，緩存其結(jié)果，可考慮存在 storage 中
• 檢查頁(yè)面中引入的三方代碼，可能會(huì)存在影響性能的問(wèn)題

本文題目：創(chuàng)新互聯(lián)百度小程序教程：優(yōu)化重點(diǎn)頁(yè)面
瀏覽地址：http://www.5511xx.com/article/cosdipc.html