白屏優(yōu)化建議

白屏檢測說明

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

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

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

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

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

白屏優(yōu)化

排查異常

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

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

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

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

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

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

框架兼容性

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

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

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

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

頁面結(jié)構(gòu)：

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

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

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

 
 
 
  
  
  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});
  
  
  });

增加過渡態(tài)提示

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

使用骨架屏

骨架屏形式類似下圖，可以很好的提升用戶使用小程序時的體驗。

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

文章標(biāo)題：創(chuàng)新互聯(lián)百度小程序教程：白屏優(yōu)化建議
分享地址：http://www.5511xx.com/article/cdcgied.html

日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

新聞中心