• 白屏優(yōu)化建議
  • 白屏檢測(cè)說(shuō)明
  • 白屏優(yōu)化
    • 排查異常
      • 服務(wù)穩(wěn)定性
      • 業(yè)務(wù)邏輯
      • 框架兼容性
    • 優(yōu)化性能和體驗(yàn)

白屏優(yōu)化建議

白屏檢測(cè)說(shuō)明

白屏定義：用戶(hù)觸發(fā)頁(yè)面打開(kāi)后，間隔一定時(shí)間后仍然沒(méi)有任何頁(yè)面繪制，則認(rèn)定為白屏。

成都創(chuàng)新互聯(lián)公司專(zhuān)業(yè)成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站，集網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、網(wǎng)站制作于一體，網(wǎng)站seo、網(wǎng)站優(yōu)化、網(wǎng)站營(yíng)銷(xiāo)、軟文平臺(tái)等專(zhuān)業(yè)人才根據(jù)搜索規(guī)律編程設(shè)計(jì)，讓網(wǎng)站在運(yùn)行后，在搜索中有好的表現(xiàn)，專(zhuān)業(yè)設(shè)計(jì)制作為您帶來(lái)效益的網(wǎng)站！讓網(wǎng)站建設(shè)為您創(chuàng)造效益。

白屏檢測(cè)原理：從用戶(hù)點(diǎn)擊小程序入口開(kāi)始計(jì)算時(shí)間，6s 后進(jìn)行截圖分析。當(dāng)截圖為空白頁(yè)面或只有背景色，則記為一次白屏。

白屏監(jiān)控范圍：僅針對(duì)小程序進(jìn)入時(shí)的首個(gè)頁(yè)面進(jìn)行檢測(cè)。

數(shù)據(jù)解讀：白屏率 = 白屏發(fā)生 PV / 小程序冷啟動(dòng)打開(kāi) PV，開(kāi)發(fā)者可以在小程序平臺(tái)上看到自己小程序白屏率的數(shù)據(jù)情況。在上述檢測(cè)機(jī)制下，無(wú)論小程序啟動(dòng)時(shí)出現(xiàn)異常還是頁(yè)面加載過(guò)程較慢，6S 時(shí)被監(jiān)測(cè)到無(wú)內(nèi)容展示，都會(huì)視為白屏。因此在進(jìn)行白屏優(yōu)化時(shí)，需要從兩方面著手，一方面對(duì)頁(yè)面異常問(wèn)題進(jìn)行排查，另一方面著重優(yōu)化頁(yè)面的性能。

白屏優(yōu)化

排查異常

小程序白屏數(shù)據(jù)出現(xiàn)異常上漲時(shí)，可以從以下三個(gè)方面著手排查分析：

服務(wù)穩(wěn)定性

1. 小程序頁(yè)面數(shù)據(jù)請(qǐng)求是否正常：
   通過(guò)線(xiàn)上巡檢，發(fā)現(xiàn)有小程序存在自身服務(wù)不穩(wěn)定的情況。例如小程序頁(yè)面數(shù)據(jù)請(qǐng)求返回 4XX，5XX 錯(cuò)誤等。
2. HTTPS 證書(shū)是否存在問(wèn)題：
   排查 HTTPS 證書(shū)是否已過(guò)期，導(dǎo)致小程序相關(guān)請(qǐng)求失敗，無(wú)法展示數(shù)據(jù)。
   有些小程序可能誤使用了自簽的 HTTPS 證書(shū)，由于無(wú)法被信任，用戶(hù)也無(wú)法強(qiáng)制信任，導(dǎo)致頁(yè)面數(shù)據(jù)獲取失敗。

業(yè)務(wù)邏輯

有些小程序的頁(yè)面數(shù)據(jù)展示可能存在前置條件，例如需要登錄、定位等。在條件不滿(mǎn)足時(shí)，可能存在兼容處理問(wèn)題。這里給出常見(jiàn)的幾種 case：

1. 頁(yè)面打開(kāi)時(shí)需要首先進(jìn)行授權(quán)，獲取權(quán)限：
   授權(quán)失敗時(shí)需要有響應(yīng)的兼容邏輯或者給予明確提示。
2. 頁(yè)面打開(kāi)時(shí)需要登錄才可展示內(nèi)容：
   例如常見(jiàn)的購(gòu)物類(lèi)小程序，用戶(hù)未登錄時(shí)需要有相應(yīng)的提示，以及觸發(fā)登錄的按鈕或者入口。
3. 網(wǎng)絡(luò)連接失敗時(shí)，頁(yè)面兼容性不足：
   這種情況最好是有對(duì)應(yīng)的錯(cuò)誤頁(yè)和重試入口，保證用戶(hù)可再操作，提供自主恢復(fù)的能力。
4. 邏輯中存在自設(shè)校驗(yàn)，校驗(yàn)不通過(guò)：
   有些小程序是從微信小程序遷移而來(lái)，內(nèi)部邏輯中可能存在自設(shè)的平臺(tái)檢測(cè)校驗(yàn)等，遷移時(shí)或者版本更新時(shí)沒(méi)有同步變更，導(dǎo)致校驗(yàn)不通過(guò)，從而導(dǎo)致頁(yè)面異常。

框架兼容性

小程序框架自身也在不斷更新，所支持的能力也在不斷更新和擴(kuò)充。同樣，開(kāi)發(fā)者也會(huì)對(duì)小程序自身也會(huì)進(jìn)行版本更新。這里就涉及到了兼容性問(wèn)題。小程序框架版本修復(fù) Bug 記錄和版本兼容性，請(qǐng)參考以下連接了解和主動(dòng)規(guī)避：

1. 語(yǔ)法支持性：運(yùn)行環(huán)境
2. 版本兼容性：兼容性說(shuō)明
3. 框架更新日志及修復(fù)問(wèn)題說(shuō)明：歷史更新日志

優(yōu)化性能和體驗(yàn)

已有啟動(dòng)性能數(shù)據(jù)，平均數(shù)據(jù)和 80 分位數(shù)據(jù)較快不一定能保證白屏率就低，白屏 case 大概率發(fā)生在性能的長(zhǎng)尾數(shù)據(jù)中。
從平臺(tái)跟進(jìn)的多個(gè)小程序白屏數(shù)據(jù)分析結(jié)果來(lái)看，小程序白屏率高的主要因素是頁(yè)面數(shù)據(jù)加載和渲染較慢。如果小程序上線(xiàn)后白屏數(shù)據(jù)就處于高位，或者版本更新后白屏數(shù)據(jù)上漲，可以通過(guò)以下方面進(jìn)行分析和優(yōu)化：

1. 頁(yè)面結(jié)構(gòu)：

部分小程序的頁(yè)面內(nèi)容重度依賴(lài)于服務(wù)器的返回，在服務(wù)端沒(méi)有數(shù)據(jù)返回的時(shí)候，頁(yè)面沒(méi)有任何內(nèi)容展示，這樣的情況在遇到網(wǎng)絡(luò)波動(dòng)或者服務(wù)發(fā)生抖動(dòng)的時(shí)候會(huì)造成白屏率的陡增。開(kāi)發(fā)者可以在服務(wù)端數(shù)據(jù)返回之前通過(guò)動(dòng)畫(huà)，文案體驗(yàn)上的優(yōu)化來(lái)減小白屏率。
2. 頁(yè)面數(shù)據(jù)加載方式：

針對(duì)一次請(qǐng)求返回的數(shù)據(jù)過(guò)多的情況，可以從兩個(gè)角度來(lái)優(yōu)化：1. 非關(guān)鍵數(shù)據(jù)延遲請(qǐng)求；2. 非關(guān)鍵數(shù)據(jù)延遲渲染。

非關(guān)鍵數(shù)據(jù)延遲請(qǐng)求：

 
 
 

  
  
  
swan.request({
  
  
  
 url: 'https://www.baidu.com/keyData',
  
  
  
 success: res => {
  
  
  
 this.setData({
  
  
  
 keyData: res
  
  
  
 });
  
  
  
 swan.request({
  
  
  
 url: 'https://www.baidu.com/nonKeyData',
  
  
  
 success: res => {}
  
  
  
 });
  
  
  
 }
  
  
  
});
 
 
 

非關(guān)鍵數(shù)據(jù)延遲渲染：

 
 
 

  
  
  
this.setData({keyData}, () => {
  
  
  
 this.setData({nonKeyData});
  
  
  
});
 
 
 

1. 增加過(guò)渡態(tài)提示

頁(yè)面加載時(shí)，可以使用 Loading 組件等形式進(jìn)行提示，給用戶(hù)一個(gè)提示，提升用戶(hù)體驗(yàn)。

1. 使用骨架屏

骨架屏形式類(lèi)似下圖，可以很好的提升用戶(hù)使用小程序時(shí)的體驗(yàn)。

1. 默認(rèn)態(tài)處理
   例如在涉及到定位時(shí)，部分小程序會(huì)等待定位完成后才展示數(shù)據(jù)，可以增加默認(rèn)態(tài)數(shù)據(jù)或當(dāng)前城市緩存，定位完成后再更新頁(yè)面數(shù)據(jù)。

網(wǎng)站題目：創(chuàng)新互聯(lián)百度小程序教程：白屏優(yōu)化建議
網(wǎng)頁(yè)網(wǎng)址：http://uogjgqi.cn/article/cdcgied.html