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

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

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

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

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

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

整體 fmp 計(jì)算公式

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

需要注意的特殊情況

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

找到重點(diǎn)頁面

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

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

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

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

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

代碼優(yōu)化

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

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

當(dāng)前標(biāo)題：創(chuàng)新互聯(lián)百度小程序教程：優(yōu)化重點(diǎn)頁面
新聞來源：http://www.dlmjj.cn/article/cosdipc.html