建站
咨詢
售后
建站咨詢
新聞中心
體驗(yàn)評(píng)分是一項(xiàng)給小程序的體驗(yàn)好壞打分的功能，它會(huì)在小程序運(yùn)行過程中實(shí)時(shí)檢查，分析出一些可能導(dǎo)致體驗(yàn)不好的地方，并且定位出哪里有問題，以及給出一些優(yōu)化建議。
淄川ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！
運(yùn)行環(huán)境要求
- 下載并安裝 1.02.1808300 或以上版本的開發(fā)者工具，下載地址。
- 基礎(chǔ)庫(kù)需要切到 2.2.0 或以上版本。
使用流程
- 打開開發(fā)者工具，在詳情里切換基礎(chǔ)庫(kù)到 2.2.0 或以上版本。
- 在調(diào)試器區(qū)域切換到 Audits 面板。
- 點(diǎn)擊”開始“按鈕，然后自行操作小程序界面，運(yùn)行過的頁(yè)面就會(huì)被“體驗(yàn)評(píng)分”檢測(cè)到。
- 點(diǎn)擊 “停止" 則結(jié)束檢測(cè)，在當(dāng)前面板顯示相應(yīng)的檢測(cè)報(bào)告，開發(fā)者可根據(jù)報(bào)告中的建議對(duì)相應(yīng)功能進(jìn)行優(yōu)化。
- 如需再次運(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)分，將無法再查看本次評(píng)分結(jié)果。
自動(dòng)運(yùn)行
為了方便開發(fā)者能夠及時(shí)發(fā)現(xiàn)小程序的體驗(yàn)問題，從開發(fā)者工具 1.02.1811150 版本起支持體驗(yàn)評(píng)分的 “自動(dòng)運(yùn)行” 功能。
該功能會(huì)在開發(fā)調(diào)試小程序時(shí)，實(shí)時(shí)檢查，一旦發(fā)現(xiàn)體驗(yàn)分?jǐn)?shù)低于 70 分時(shí)，系統(tǒng)會(huì)在 console 面板打印一個(gè) warning 信息提示開發(fā)者，此時(shí)開發(fā)者可以切到 Audits 面板查看詳情。
開發(fā)者在工具的右上角 “詳情” 面板的 本地設(shè)置 中勾選 “自動(dòng)運(yùn)行體驗(yàn)評(píng)分” 選項(xiàng)即可開啟。
評(píng)分規(guī)則
具體的評(píng)分細(xì)則和詳情的規(guī)則說明可參考下列文檔：
1、評(píng)分方法
目前體驗(yàn)評(píng)分共有27條規(guī)則，共分為三類：性能、體驗(yàn)、最佳實(shí)踐，滿足規(guī)則要求得分（100分），否則不得分（0分），最后根據(jù)各規(guī)則權(quán)重和公式計(jì)算出總得分。
權(quán)重為0的規(guī)則，表示該規(guī)則不參與評(píng)分，僅作為提示項(xiàng)。開發(fā)者可在開發(fā)者工具中可以點(diǎn)擊“忽略”。各規(guī)則的得分條件也可能會(huì)隨小程序的版本更新有一定的調(diào)整。
權(quán)重如下表
| 分類 | 規(guī)則 | 權(quán)重 |
|---|---|---|
| 性能 | 腳本執(zhí)行時(shí)間 | 7 |
| 首屏?xí)r間 | 6 | |
| 渲染時(shí)間 | 6 | |
| setData調(diào)用頻率 | 6 | |
| setData數(shù)據(jù)大小 | 6 | |
| WXML節(jié)點(diǎn)數(shù) | 6 | |
| 請(qǐng)求耗時(shí) | 5 | |
| 網(wǎng)絡(luò)請(qǐng)求數(shù) | 5 | |
| 圖片請(qǐng)求數(shù) | 5 | |
| 圖片緩存 | 4 | |
| 圖片大小 | 4 | |
| 網(wǎng)絡(luò)請(qǐng)求緩存 | 2 | |
| 體驗(yàn) | 開啟慣性滾動(dòng) | 8 |
避免使用:active偽類來實(shí)現(xiàn)點(diǎn)擊態(tài) | 8 | |
| 保持圖片大小比例 | 4 | |
| 可點(diǎn)擊元素的響應(yīng)區(qū)域 | 3 | |
| iPhone X兼容 | 3 | |
| 合理的顏色搭配 | 0 | |
| 最佳實(shí)踐 | 避免JS異常 | 3 |
| 避免網(wǎng)絡(luò)請(qǐng)求異常 | 3 | |
| 廢棄接口 | 2 | |
| 使用HTTPS | 1 | |
| 避免setData數(shù)據(jù)冗余 | 1 | |
| 最低基礎(chǔ)庫(kù)版本 | 0 | |
| 移除不可訪問到的頁(yè)面 | 0 | |
| WXSS使用率 | 0 | |
| 及時(shí)回收定時(shí)器 | 0 |
2、性能
1. 首屏?xí)r間
首屏?xí)r間是指用戶從打開小程序看到第一屏主要內(nèi)容的時(shí)間，首屏?xí)r間太長(zhǎng)會(huì)導(dǎo)致用戶長(zhǎng)時(shí)間看到的都是白屏，影響使用體驗(yàn)。
優(yōu)化首屏?xí)r間，可以分為以下幾種情況：
- 首屏渲染的內(nèi)容較多，需要集合多份數(shù)據(jù)進(jìn)行渲染。這種情況需要開發(fā)者把內(nèi)容分優(yōu)先級(jí)，把優(yōu)先級(jí)高的內(nèi)容做優(yōu)先展示，縮短白屏?xí)r間；
- 首屏內(nèi)容依賴的數(shù)據(jù)從服務(wù)端請(qǐng)求的時(shí)間太長(zhǎng)。開發(fā)者需要從服務(wù)端側(cè)具體分析服務(wù)端數(shù)據(jù)返回的時(shí)間長(zhǎng)的原因；
- 一次性渲染數(shù)據(jù)太大或依賴的計(jì)算過于復(fù)雜。減少渲染的數(shù)據(jù)量、優(yōu)化渲染相關(guān)數(shù)據(jù)的算法可以解決這類問題。
得分條件：首屏?xí)r間不超過 5 秒
2. 渲染時(shí)間
渲染時(shí)間指的是首次渲染或因數(shù)據(jù)變化帶來的頁(yè)面結(jié)構(gòu)變化的渲染花費(fèi)的時(shí)間。
渲染界面的耗時(shí)過長(zhǎng)會(huì)讓用戶覺得卡頓，體驗(yàn)較差，出現(xiàn)這一情況時(shí)，需要校驗(yàn)下是否同時(shí)渲染的區(qū)域太大（例如列表過長(zhǎng)），或渲染依賴的計(jì)算是否過于復(fù)雜。
得分條件：渲染時(shí)間不超過 500ms
3. 腳本執(zhí)行時(shí)間
腳本執(zhí)行時(shí)間是指JS腳本在一次同步執(zhí)行中消耗的時(shí)間，比如生命周期回調(diào)、事件處理函數(shù)的同步執(zhí)行時(shí)間。
執(zhí)行腳本的耗時(shí)過長(zhǎng)會(huì)讓用戶覺得卡頓，體驗(yàn)較差，出現(xiàn)這一情況時(shí)，需要確認(rèn)并優(yōu)化腳本的邏輯
得分條件：一個(gè)執(zhí)行周期內(nèi)腳本運(yùn)行時(shí)間不超過 1 秒
4. setData調(diào)用頻率
setData接口的調(diào)用涉及邏輯層與渲染層間的線程通信，通信過于頻繁可能導(dǎo)致處理隊(duì)列阻塞，界面渲染不及時(shí)而導(dǎo)致卡頓，應(yīng)避免無用的頻繁調(diào)用。
得分條件：每秒調(diào)用setData的次數(shù)不超過 20 次
5. setData數(shù)據(jù)大小
由于小程序運(yùn)行邏輯線程與渲染線程之上，setData的調(diào)用會(huì)把數(shù)據(jù)從邏輯層傳到渲染層，數(shù)據(jù)太大會(huì)增加通信時(shí)間。
得分條件：setData的數(shù)據(jù)在JSON.stringify后不超過 256KB
6. WXML節(jié)點(diǎn)數(shù)
建議一個(gè)頁(yè)面使用少于 1000 個(gè) WXML 節(jié)點(diǎn)，節(jié)點(diǎn)樹深度少于 30 層，子節(jié)點(diǎn)數(shù)不大于 60 個(gè)。一個(gè)太大的 WXML 節(jié)點(diǎn)樹會(huì)增加內(nèi)存的使用，樣式重排時(shí)間也會(huì)更長(zhǎng)，影響體驗(yàn)。
得分條件：頁(yè)面WXML節(jié)點(diǎn)少于 1000 個(gè)，節(jié)點(diǎn)樹深度少于 30 層，子節(jié)點(diǎn)數(shù)不大于 60 個(gè)
7. 圖片緩存
開啟 HTTP 緩存控制后，下一次加載同樣的圖片，會(huì)直接從緩存讀取，大大提升加載速度。
得分條件：所有圖片均開啟 HTTP 緩存
8. 圖片大小
圖片太大會(huì)增加下載時(shí)間和內(nèi)存的消耗，應(yīng)根據(jù)顯示區(qū)域大小合理控制圖片大小。
得分條件：圖片寬高乘積 <= 實(shí)際顯示寬高乘積 * (設(shè)備像素比 ^ 2)
9. 請(qǐng)求耗時(shí)
請(qǐng)求的耗時(shí)太長(zhǎng)會(huì)讓用戶一直等待甚至離開，應(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)致加載慢等問題，應(yīng)合理控制請(qǐng)求數(shù)量，甚至做請(qǐng)求的合并等。
得分條件：通過wx.request發(fā)起的耗時(shí)超過 300ms 的請(qǐng)求并發(fā)數(shù)不超過 10 個(gè)
11. 圖片請(qǐng)求數(shù)
短時(shí)間內(nèi)發(fā)起太多圖片請(qǐng)求會(huì)觸發(fā)瀏覽器并行加載的限制，可能導(dǎo)致圖片加載慢，用戶一直處理等待。應(yīng)該合理控制數(shù)量，可考慮使用雪碧圖技術(shù)或在屏幕外的圖片使用懶加載。
得分條件：同域名耗時(shí)超過 100ms 的圖片請(qǐng)求并發(fā)數(shù)不超過 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 分鐘以內(nèi)同一個(gè)url請(qǐng)求不出現(xiàn)兩次回包大于 128KB 且一模一樣的內(nèi)容
3、體驗(yàn)
1. 開啟慣性滾動(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偽類來實(shí)現(xiàn)點(diǎn)擊態(tài)
使用 css :active偽類來實(shí)現(xiàn)點(diǎn)擊態(tài)，很容易觸發(fā)，并且滾動(dòng)或滑動(dòng)時(shí)點(diǎn)擊態(tài)不會(huì)消失，體驗(yàn)較差。建議使用小程序內(nèi)置組件的 'hover-class' 屬性來實(shí)現(xiàn)
得分條件：不使用:active偽類，并使用hover-class替換:active
3. 保持圖片大小比例
圖片若沒有按原圖寬高比例顯示，可能導(dǎo)致圖片歪曲，不美觀，甚至導(dǎo)致用戶識(shí)別困難?？筛鶕?jù)情況設(shè)置 image 組件的 mode 屬性，以保持原圖寬高比。
得分條件：顯示的高/寬與原圖的高/寬不超過 15%
4. 可點(diǎn)擊元素的響應(yīng)區(qū)域
我們應(yīng)該合理地設(shè)置好可點(diǎn)擊元素的響應(yīng)區(qū)域大小，如果過小會(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)致程序的交互無法進(jìn)行下去，我們應(yīng)當(dāng)追求零異常，保證程序的高魯棒性和高可用性。
得分條件：不出現(xiàn)任何JS異常
2. 避免網(wǎng)絡(luò)請(qǐng)求異常
請(qǐng)求失敗可能導(dǎo)致程序的交互無法進(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)起見，建議不要使用，避免后續(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è)未綁定的變量意味著與界面渲染無關(guān)，傳入setData會(huì)造成不必要的性能消耗。
得分條件：setData傳入的所有數(shù)據(jù)都在模板渲染中有相關(guān)依賴
6. 最低基礎(chǔ)庫(kù)版本
當(dāng)使用的組件/API 的支持版本大于配置的線上最低基礎(chǔ)庫(kù)版本時(shí)，可能導(dǎo)致相應(yīng)功能不可用。開發(fā)者可通過調(diào)整最低基礎(chǔ)庫(kù)版本或在代碼上兼容的方式解決該問題。
由于用戶可以通過代碼兼容的方式解決該問題，因此該指標(biāo)僅作為評(píng)分的提醒項(xiàng)，不計(jì)入總分中。
判斷標(biāo)準(zhǔn)：不存在使用的組件/API 的支持版本大于配置的線上最低基礎(chǔ)庫(kù)版本
7. 移除不可訪問到的頁(yè)面
小程序的包大小會(huì)影響加載時(shí)間，應(yīng)該盡量控制包體積大小，避免將不會(huì)被使用的文件打包進(jìn)去。
由于該項(xiàng)指標(biāo)依賴開發(fā)者的操作路徑，因此僅作為評(píng)分的提醒項(xiàng)，不計(jì)入總分中。
判斷標(biāo)準(zhǔn)：不存在訪問不到的頁(yè)面被打包到小程序中
8. WXSS使用率
我們應(yīng)該按需引入 wxss 資源，如果小程序中存在大量未使用的樣式，會(huì)增加小程序包體積大小，從而在一定程度上影響加載速度。
由于該項(xiàng)指標(biāo)依賴開發(fā)者的操作路徑，因此僅作為評(píng)分的提醒項(xiàng)，不計(jì)入總分中。
判斷標(biāo)準(zhǔn)：每個(gè) wxss 資源的未使用部分不超過 2KB
9. 及時(shí)回收定時(shí)器
定時(shí)器是全局的，并不是跟頁(yè)面綁定的，當(dāng)小程序從一個(gè)頁(yè)面路由到另一個(gè)頁(yè)面之后，前一個(gè)頁(yè)面定時(shí)器應(yīng)注意手動(dòng)回收。
由于該項(xiàng)指標(biāo)依賴開發(fā)者的操作路徑，因此僅作為評(píng)分的提醒項(xiàng)，不計(jì)入總分中。
判斷標(biāo)準(zhǔn)：所有定時(shí)器的回調(diào)執(zhí)行時(shí)所在的頁(yè)面都與設(shè)置定時(shí)器的頁(yè)面一致
網(wǎng)頁(yè)名稱：創(chuàng)新互聯(lián)小程序教程：微信小程序 體驗(yàn)評(píng)分
網(wǎng)頁(yè)網(wǎng)址：http://www.5511xx.com/article/dpoccgi.html
