微信小程序 體驗(yàn)評(píng)分

體驗(yàn)評(píng)分是一項(xiàng)給小程序的體驗(yàn)好壞打分的功能，它會(huì)在小程序運(yùn)行過(guò)程中實(shí)時(shí)檢查，分析出一些可能導(dǎo)致體驗(yàn)不好的地方，并且定位出哪里有問(wèn)題，以及給出一些優(yōu)化建議。

運(yùn)行環(huán)境要求

• 下載并安裝 1.02.1808300 或以上版本的開(kāi)發(fā)者工具，下載地址。
• 基礎(chǔ)庫(kù)需要切到 2.2.0 或以上版本。

使用流程

1. 打開(kāi)開(kāi)發(fā)者工具，在詳情里切換基礎(chǔ)庫(kù)到 2.2.0 或以上版本。
2. 在調(diào)試器區(qū)域切換到 Audits 面板。
3. 點(diǎn)擊”開(kāi)始“按鈕，然后自行操作小程序界面，運(yùn)行過(guò)的頁(yè)面就會(huì)被“體驗(yàn)評(píng)分”檢測(cè)到。

1. 點(diǎn)擊 “停止" 則結(jié)束檢測(cè)，在當(dāng)前面板顯示相應(yīng)的檢測(cè)報(bào)告，開(kāi)發(fā)者可根據(jù)報(bào)告中的建議對(duì)相應(yīng)功能進(jìn)行優(yōu)化。
2. 如需再次運(yùn)行體驗(yàn)評(píng)分，可點(diǎn)擊報(bào)告上方的“清空體驗(yàn)評(píng)分”恢復(fù)初始狀態(tài)。請(qǐng)注意，目前系統(tǒng)不提供報(bào)告存儲(chǔ)服務(wù)，一旦清空體驗(yàn)評(píng)分，將無(wú)法再查看本次評(píng)分結(jié)果。

自動(dòng)運(yùn)行

為了方便開(kāi)發(fā)者能夠及時(shí)發(fā)現(xiàn)小程序的體驗(yàn)問(wèn)題，從開(kāi)發(fā)者工具 1.02.1811150 版本起支持體驗(yàn)評(píng)分的 “自動(dòng)運(yùn)行” 功能。

該功能會(huì)在開(kāi)發(fā)調(diào)試小程序時(shí)，實(shí)時(shí)檢查，一旦發(fā)現(xiàn)體驗(yàn)分?jǐn)?shù)低于 70 分時(shí)，系統(tǒng)會(huì)在 console 面板打印一個(gè) warning 信息提示開(kāi)發(fā)者，此時(shí)開(kāi)發(fā)者可以切到 Audits 面板查看詳情。

開(kāi)發(fā)者在工具的右上角 “詳情” 面板的 本地設(shè)置 中勾選 “自動(dòng)運(yùn)行體驗(yàn)評(píng)分” 選項(xiàng)即可開(kāi)啟。

評(píng)分規(guī)則

具體的評(píng)分細(xì)則和詳情的規(guī)則說(shuō)明可參考下列文檔：

1、評(píng)分方法

目前體驗(yàn)評(píng)分共有27條規(guī)則，共分為三類(lèi)：性能、體驗(yàn)、最佳實(shí)踐，滿足規(guī)則要求得分（100分），否則不得分（0分），最后根據(jù)各規(guī)則權(quán)重和公式計(jì)算出總得分。

權(quán)重為0的規(guī)則，表示該規(guī)則不參與評(píng)分，僅作為提示項(xiàng)。開(kāi)發(fā)者可在開(kāi)發(fā)者工具中可以點(diǎn)擊“忽略”。各規(guī)則的得分條件也可能會(huì)隨小程序的版本更新有一定的調(diào)整。

權(quán)重如下表

2、性能

1. 首屏?xí)r間

首屏?xí)r間是指用戶從打開(kāi)小程序看到第一屏主要內(nèi)容的時(shí)間，首屏?xí)r間太長(zhǎng)會(huì)導(dǎo)致用戶長(zhǎng)時(shí)間看到的都是白屏，影響使用體驗(yàn)。

優(yōu)化首屏?xí)r間，可以分為以下幾種情況：

1. 首屏渲染的內(nèi)容較多，需要集合多份數(shù)據(jù)進(jìn)行渲染。這種情況需要開(kāi)發(fā)者把內(nèi)容分優(yōu)先級(jí)，把優(yōu)先級(jí)高的內(nèi)容做優(yōu)先展示，縮短白屏?xí)r間；
2. 首屏內(nèi)容依賴(lài)的數(shù)據(jù)從服務(wù)端請(qǐng)求的時(shí)間太長(zhǎng)。開(kāi)發(fā)者需要從服務(wù)端側(cè)具體分析服務(wù)端數(shù)據(jù)返回的時(shí)間長(zhǎng)的原因；
3. 一次性渲染數(shù)據(jù)太大或依賴(lài)的計(jì)算過(guò)于復(fù)雜。減少渲染的數(shù)據(jù)量、優(yōu)化渲染相關(guān)數(shù)據(jù)的算法可以解決這類(lèi)問(wèn)題。

得分條件：首屏?xí)r間不超過(guò) 5 秒

2. 渲染時(shí)間

渲染時(shí)間指的是首次渲染或因數(shù)據(jù)變化帶來(lái)的頁(yè)面結(jié)構(gòu)變化的渲染花費(fèi)的時(shí)間。

渲染界面的耗時(shí)過(guò)長(zhǎng)會(huì)讓用戶覺(jué)得卡頓，體驗(yàn)較差，出現(xiàn)這一情況時(shí)，需要校驗(yàn)下是否同時(shí)渲染的區(qū)域太大（例如列表過(guò)長(zhǎng)），或渲染依賴(lài)的計(jì)算是否過(guò)于復(fù)雜。

得分條件：渲染時(shí)間不超過(guò) 500ms

3. 腳本執(zhí)行時(shí)間

腳本執(zhí)行時(shí)間是指JS腳本在一次同步執(zhí)行中消耗的時(shí)間，比如生命周期回調(diào)、事件處理函數(shù)的同步執(zhí)行時(shí)間。

執(zhí)行腳本的耗時(shí)過(guò)長(zhǎng)會(huì)讓用戶覺(jué)得卡頓，體驗(yàn)較差，出現(xiàn)這一情況時(shí)，需要確認(rèn)并優(yōu)化腳本的邏輯

得分條件：一個(gè)執(zhí)行周期內(nèi)腳本運(yùn)行時(shí)間不超過(guò) 1 秒

4. setData調(diào)用頻率

setData接口的調(diào)用涉及邏輯層與渲染層間的線程通信，通信過(guò)于頻繁可能導(dǎo)致處理隊(duì)列阻塞，界面渲染不及時(shí)而導(dǎo)致卡頓，應(yīng)避免無(wú)用的頻繁調(diào)用。

得分條件：每秒調(diào)用setData的次數(shù)不超過(guò) 20 次

5. setData數(shù)據(jù)大小

由于小程序運(yùn)行邏輯線程與渲染線程之上，setData的調(diào)用會(huì)把數(shù)據(jù)從邏輯層傳到渲染層，數(shù)據(jù)太大會(huì)增加通信時(shí)間。

得分條件：setData的數(shù)據(jù)在JSON.stringify后不超過(guò) 256KB

6. WXML節(jié)點(diǎn)數(shù)

建議一個(gè)頁(yè)面使用少于 1000 個(gè) WXML 節(jié)點(diǎn)，節(jié)點(diǎn)樹(shù)深度少于 30 層，子節(jié)點(diǎn)數(shù)不大于 60 個(gè)。一個(gè)太大的 WXML 節(jié)點(diǎn)樹(shù)會(huì)增加內(nèi)存的使用，樣式重排時(shí)間也會(huì)更長(zhǎng)，影響體驗(yàn)。

得分條件：頁(yè)面WXML節(jié)點(diǎn)少于 1000 個(gè)，節(jié)點(diǎn)樹(shù)深度少于 30 層，子節(jié)點(diǎn)數(shù)不大于 60 個(gè)

7. 圖片緩存

開(kāi)啟 HTTP 緩存控制后，下一次加載同樣的圖片，會(huì)直接從緩存讀取，大大提升加載速度。

得分條件：所有圖片均開(kāi)啟 HTTP 緩存

8. 圖片大小

圖片太大會(huì)增加下載時(shí)間和內(nèi)存的消耗，應(yīng)根據(jù)顯示區(qū)域大小合理控制圖片大小。

得分條件：圖片寬高乘積 <= 實(shí)際顯示寬高乘積 * (設(shè)備像素比 ^ 2)

9. 請(qǐng)求耗時(shí)

請(qǐng)求的耗時(shí)太長(zhǎng)會(huì)讓用戶一直等待甚至離開(kāi)，應(yīng)當(dāng)優(yōu)化好服務(wù)器處理時(shí)間、減小回包大小，讓請(qǐng)求快速響應(yīng)。

得分條件：所有網(wǎng)絡(luò)請(qǐng)求都在 1 秒內(nèi)返回結(jié)果

10. 網(wǎng)絡(luò)請(qǐng)求數(shù)

短時(shí)間內(nèi)發(fā)起太多請(qǐng)求會(huì)觸發(fā)小程序并行請(qǐng)求數(shù)量的限制，同時(shí)太多請(qǐng)求也可能導(dǎo)致加載慢等問(wèn)題，應(yīng)合理控制請(qǐng)求數(shù)量，甚至做請(qǐng)求的合并等。

得分條件：通過(guò)wx.request發(fā)起的耗時(shí)超過(guò) 300ms 的請(qǐng)求并發(fā)數(shù)不超過(guò) 10 個(gè)

11. 圖片請(qǐng)求數(shù)

短時(shí)間內(nèi)發(fā)起太多圖片請(qǐng)求會(huì)觸發(fā)瀏覽器并行加載的限制，可能導(dǎo)致圖片加載慢，用戶一直處理等待。應(yīng)該合理控制數(shù)量，可考慮使用雪碧圖技術(shù)或在屏幕外的圖片使用懶加載。

得分條件：同域名耗時(shí)超過(guò) 100ms 的圖片請(qǐng)求并發(fā)數(shù)不超過(guò) 20 個(gè)

12. 網(wǎng)絡(luò)請(qǐng)求緩存

發(fā)起網(wǎng)絡(luò)請(qǐng)求總會(huì)讓用戶等待，可能造成不好的體驗(yàn)，應(yīng)盡量避免多余的請(qǐng)求，比如對(duì)同樣的請(qǐng)求進(jìn)行緩存

得分條件：3 分鐘以?xún)?nèi)同一個(gè)url請(qǐng)求不出現(xiàn)兩次回包大于 128KB 且一模一樣的內(nèi)容

3、體驗(yàn)

1. 開(kāi)啟慣性滾動(dòng)

慣性滾動(dòng)會(huì)使?jié)L動(dòng)比較順暢，在安卓下默認(rèn)有慣性滾動(dòng)，而在 iOS 下需要額外設(shè)置-webkit-overflow-scrolling: touch的樣式；

得分條件：wxss中帶有overflow: scroll的元素，在 iOS 下需要設(shè)置-webkit-overflow-scrolling: touch樣式

2. 避免使用:active偽類(lèi)來(lái)實(shí)現(xiàn)點(diǎn)擊態(tài)

使用 css :active偽類(lèi)來(lái)實(shí)現(xiàn)點(diǎn)擊態(tài)，很容易觸發(fā)，并且滾動(dòng)或滑動(dòng)時(shí)點(diǎn)擊態(tài)不會(huì)消失，體驗(yàn)較差。建議使用小程序內(nèi)置組件的 'hover-class' 屬性來(lái)實(shí)現(xiàn)

得分條件：不使用:active偽類(lèi)，并使用hover-class替換:active

3. 保持圖片大小比例

圖片若沒(méi)有按原圖寬高比例顯示，可能導(dǎo)致圖片歪曲，不美觀，甚至導(dǎo)致用戶識(shí)別困難?？筛鶕?jù)情況設(shè)置 image 組件的 mode 屬性，以保持原圖寬高比。

得分條件：顯示的高/寬與原圖的高/寬不超過(guò) 15%

4. 可點(diǎn)擊元素的響應(yīng)區(qū)域

我們應(yīng)該合理地設(shè)置好可點(diǎn)擊元素的響應(yīng)區(qū)域大小，如果過(guò)小會(huì)導(dǎo)致用戶很難點(diǎn)中，體驗(yàn)很差。

得分條件：可點(diǎn)擊元素的寬高都不小于 20px

5. iPhone X 兼容

對(duì)于position: fixed的可交互組件，如果渲染在iPhone X的安全區(qū)域外，容易誤觸 Home Indicator，應(yīng)當(dāng)把可交互的部分都渲染到安全區(qū)域內(nèi)。

建議使用以下wxss進(jìn)行兼容

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

得分條件：position: fixed且高度小于 68px 的可交互組件渲染在安全區(qū)域內(nèi)

6. 合理的顏色搭配

文字顏色與背景色需要搭配得當(dāng)，適宜的顏色對(duì)比度可以讓用戶更好地閱讀，提升小程序的用戶體驗(yàn)。

由于顏色搭配的計(jì)算方法較為復(fù)雜，目前算法還在不斷優(yōu)化中。因此該指標(biāo)僅作為評(píng)分的提醒項(xiàng)，不計(jì)入總分中。

判斷標(biāo)準(zhǔn)：

1. 對(duì)于較大字體（font-size >= 24px，或同時(shí)滿足font-size >= 19px與font-weight >= 700），文字顏色和背景顏色的對(duì)比度不小于3

2. 其他字體，文字顏色和背景顏色的對(duì)比度不小于4.5

對(duì)比度計(jì)算方法參考W3C標(biāo)準(zhǔn)

4、最佳實(shí)踐

1. 避免JS異常

出現(xiàn) JavaScript 異常可能導(dǎo)致程序的交互無(wú)法進(jìn)行下去，我們應(yīng)當(dāng)追求零異常，保證程序的高魯棒性和高可用性。

得分條件：不出現(xiàn)任何JS異常

2. 避免網(wǎng)絡(luò)請(qǐng)求異常

請(qǐng)求失敗可能導(dǎo)致程序的交互無(wú)法進(jìn)行下去，應(yīng)當(dāng)保證所有請(qǐng)求都能成功。

得分條件：所有已授權(quán)網(wǎng)絡(luò)請(qǐng)求都正常返回，未授權(quán)網(wǎng)絡(luò)請(qǐng)求需要給出 401 或 403 這兩種狀態(tài)碼

3. 不使用廢棄接口

使用即將廢棄或已廢棄接口，可能導(dǎo)致小程序運(yùn)行不正常。一般而言，接口不會(huì)立即去掉，但保險(xiǎn)起見(jiàn)，建議不要使用，避免后續(xù)小程序突然運(yùn)行異常。

得分條件：不使用任何文檔中提示廢棄的接口

4. 使用HTTPS

使用HTTPS，可以讓你的小程序更加安全，而HTTP是明文傳輸?shù)?，存在可能被篡改?nèi)容的風(fēng)險(xiǎn)

得分條件：所有網(wǎng)絡(luò)請(qǐng)求都使用HTTPS

5. 避免setData數(shù)據(jù)冗余

setData操作會(huì)引起框架處理一些渲染界面相關(guān)的工作，一個(gè)未綁定的變量意味著與界面渲染無(wú)關(guān)，傳入setData會(huì)造成不必要的性能消耗。

得分條件：setData傳入的所有數(shù)據(jù)都在模板渲染中有相關(guān)依賴(lài)

6. 最低基礎(chǔ)庫(kù)版本

當(dāng)使用的組件/API 的支持版本大于配置的線上最低基礎(chǔ)庫(kù)版本時(shí)，可能導(dǎo)致相應(yīng)功能不可用。開(kāi)發(fā)者可通過(guò)調(diào)整最低基礎(chǔ)庫(kù)版本或在代碼上兼容的方式解決該問(wèn)題。

由于用戶可以通過(guò)代碼兼容的方式解決該問(wèn)題，因此該指標(biāo)僅作為評(píng)分的提醒項(xiàng)，不計(jì)入總分中。

判斷標(biāo)準(zhǔn)：不存在使用的組件/API 的支持版本大于配置的線上最低基礎(chǔ)庫(kù)版本

7. 移除不可訪問(wèn)到的頁(yè)面

小程序的包大小會(huì)影響加載時(shí)間，應(yīng)該盡量控制包體積大小，避免將不會(huì)被使用的文件打包進(jìn)去。

由于該項(xiàng)指標(biāo)依賴(lài)開(kāi)發(fā)者的操作路徑，因此僅作為評(píng)分的提醒項(xiàng)，不計(jì)入總分中。

判斷標(biāo)準(zhǔn)：不存在訪問(wèn)不到的頁(yè)面被打包到小程序中

8. WXSS使用率

我們應(yīng)該按需引入 wxss 資源，如果小程序中存在大量未使用的樣式，會(huì)增加小程序包體積大小，從而在一定程度上影響加載速度。

由于該項(xiàng)指標(biāo)依賴(lài)開(kāi)發(fā)者的操作路徑，因此僅作為評(píng)分的提醒項(xiàng)，不計(jì)入總分中。

判斷標(biāo)準(zhǔn)：每個(gè) wxss 資源的未使用部分不超過(guò) 2KB

9. 及時(shí)回收定時(shí)器

定時(shí)器是全局的，并不是跟頁(yè)面綁定的，當(dāng)小程序從一個(gè)頁(yè)面路由到另一個(gè)頁(yè)面之后，前一個(gè)頁(yè)面定時(shí)器應(yīng)注意手動(dòng)回收。

由于該項(xiàng)指標(biāo)依賴(lài)開(kāi)發(fā)者的操作路徑，因此僅作為評(píng)分的提醒項(xiàng)，不計(jì)入總分中。

判斷標(biāo)準(zhǔn)：所有定時(shí)器的回調(diào)執(zhí)行時(shí)所在的頁(yè)面都與設(shè)置定時(shí)器的頁(yè)面一致