0.27微信小程序體驗評分 · 惠惠軟件小程序申請上線幫助系統

體驗評分是一項給小程序的體驗好壞打分的功能，它會在小程序運行過程中實時檢查，分析出一些可能導致體驗不好的地方，并且定位出哪里有問題，以及給出一些優化建議。 ### [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/audits.html#%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83%E8%A6%81%E6%B1%82)運行環境要求 * 下載并安裝 1.02.1808300 或以上版本的開發者工具，[下載地址](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)。 * 基礎庫需要切到 2.2.0 或以上版本。 ### [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/audits.html#%E4%BD%BF%E7%94%A8%E6%B5%81%E7%A8%8B)使用流程 1. 打開開發者工具，在詳情里切換基礎庫到 2.2.0 或以上版本。 2. 在調試器區域切換到 Audits 面板。 3. 點擊”開始“按鈕，然后自行操作小程序界面，運行過的頁面就會被“體驗評分”檢測到。 ![start](https://atts.w3cschool.cn/attachments/day_200729/202007291554222190.png) 1. 點擊 “停止" 則結束檢測，在當前面板顯示相應的檢測報告，開發者可根據報告中的建議對相應功能進行優化。 2. 如需再次運行體驗評分，可點擊報告上方的“清空體驗評分”恢復初始狀態。請注意，目前系統不提供報告存儲服務，一旦清空體驗評分，將無法再查看本次評分結果。 ![start](https://atts.w3cschool.cn/attachments/day_200729/202007291554227225.png) ### [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/audits.html#%E8%87%AA%E5%8A%A8%E8%BF%90%E8%A1%8C)自動運行為了方便開發者能夠及時發現小程序的體驗問題，從開發者工具 1.02.1811150 版本起支持體驗評分的 “自動運行” 功能。該功能會在開發調試小程序時，實時檢查，一旦發現體驗分數低于 70 分時，系統會在 console 面板打印一個 warning 信息提示開發者，此時開發者可以切到 Audits 面板查看詳情。開發者在工具的右上角 “詳情” 面板的本地設置中勾選 “自動運行體驗評分” 選項即可開啟。 ![autorun](https://atts.w3cschool.cn/attachments/day_200729/202007291554233362.png) ### [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/audits.html#%E8%AF%84%E5%88%86%E8%A7%84%E5%88%99)評分規則具體的評分細則和詳情的規則說明可參考下列文檔： # 1、評分方法 * * * 目前體驗評分共有27條規則，共分為三類：性能、體驗、最佳實踐，滿足規則要求得分（100分），否則不得分（0分），最后根據各規則權重和公式計算出總得分。 ![](https://atts.w3cschool.cn/attachments/day_200729/202007291554503605.png) > 權重為0的規則，表示該規則不參與評分，僅作為提示項。開發者可在開發者工具中可以點擊“忽略”。各規則的得分條件也可能會隨小程序的版本更新有一定的調整。 ### [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/scoring.html#%E6%9D%83%E9%87%8D%E5%A6%82%E4%B8%8B%E8%A1%A8)權重如下表 | 分類 | 規則 | 權重 | | --- | --- | --- | | 性能 | 腳本執行時間 | 7 | | | 首屏時間 | 6 | | | 渲染時間 | 6 | | | setData調用頻率 | 6 | | | setData數據大小 | 6 | | | WXML節點數 | 6 | | | 請求耗時 | 5 | | | 網絡請求數 | 5 | | | 圖片請求數 | 5 | | | 圖片緩存 | 4 | | | 圖片大小 | 4 | | | 網絡請求緩存 | 2 | | 體驗 | 開啟慣性滾動 | 8 | | | 避免使用`:active`偽類來實現點擊態 | 8 | | | 保持圖片大小比例 | 4 | | | 可點擊元素的響應區域 | 3 | | | iPhone X兼容 | 3 | | | 合理的顏色搭配 | 0 | | 最佳實踐 | 避免JS異常 | 3 | | | 避免網絡請求異常 | 3 | | | 廢棄接口 | 2 | | | 使用HTTPS | 1 | | | 避免setData數據冗余 | 1 | | | 最低基礎庫版本 | 0 | | | 移除不可訪問到的頁面 | 0 | | | WXSS使用率 | 0 | | | 及時回收定時器 | 0 | # 2、性能 * * * ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/performance.html#_1-%E9%A6%96%E5%B1%8F%E6%97%B6%E9%97%B4)1\. 首屏時間首屏時間是指用戶從打開小程序看到第一屏主要內容的時間，首屏時間太長會導致用戶長時間看到的都是白屏，影響使用體驗。優化首屏時間，可以分為以下幾種情況： 1. 首屏渲染的內容較多，需要集合多份數據進行渲染。這種情況需要開發者把內容分優先級，把優先級高的內容做優先展示，縮短白屏時間； 2. 首屏內容依賴的數據從服務端請求的時間太長。開發者需要從服務端側具體分析服務端數據返回的時間長的原因； 3. 一次性渲染數據太大或依賴的計算過于復雜。減少渲染的數據量、優化渲染相關數據的算法可以解決這類問題。 **得分條件：首屏時間不超過 5 秒** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/performance.html#_2-%E6%B8%B2%E6%9F%93%E6%97%B6%E9%97%B4)2\. 渲染時間渲染時間指的是首次渲染或因數據變化帶來的頁面結構變化的渲染花費的時間。渲染界面的耗時過長會讓用戶覺得卡頓，體驗較差，出現這一情況時，需要校驗下是否同時渲染的區域太大（例如列表過長），或渲染依賴的計算是否過于復雜。 **得分條件：渲染時間不超過 500ms** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/performance.html#_3-%E8%84%9A%E6%9C%AC%E6%89%A7%E8%A1%8C%E6%97%B6%E9%97%B4)3\. 腳本執行時間腳本執行時間是指JS腳本在一次同步執行中消耗的時間，比如生命周期回調、事件處理函數的同步執行時間。執行腳本的耗時過長會讓用戶覺得卡頓，體驗較差，出現這一情況時，需要確認并優化腳本的邏輯 **得分條件：一個執行周期內腳本運行時間不超過 1 秒** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/performance.html#_4-setData%E8%B0%83%E7%94%A8%E9%A2%91%E7%8E%87)4\. setData調用頻率 setData接口的調用涉及邏輯層與渲染層間的線程通信，通信過于頻繁可能導致處理隊列阻塞，界面渲染不及時而導致卡頓，應避免無用的頻繁調用。 **得分條件：每秒調用setData的次數不超過 20 次** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/performance.html#_5-setData%E6%95%B0%E6%8D%AE%E5%A4%A7%E5%B0%8F)5\. setData數據大小由于小程序運行邏輯線程與渲染線程之上，setData的調用會把數據從邏輯層傳到渲染層，數據太大會增加通信時間。 **得分條件：setData的數據在JSON.stringify后不超過 256KB** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/performance.html#_6-WXML%E8%8A%82%E7%82%B9%E6%95%B0)6\. WXML節點數建議一個頁面使用少于 1000 個 WXML 節點，節點樹深度少于 30 層，子節點數不大于 60 個。一個太大的 WXML 節點樹會增加內存的使用，樣式重排時間也會更長，影響體驗。 **得分條件：頁面WXML節點少于 1000 個，節點樹深度少于 30 層，子節點數不大于 60 個** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/performance.html#_7-%E5%9B%BE%E7%89%87%E7%BC%93%E5%AD%98)7\. 圖片緩存開啟 HTTP 緩存控制后，下一次加載同樣的圖片，會直接從緩存讀取，大大提升加載速度。 **得分條件：所有圖片均開啟 HTTP 緩存** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/performance.html#_8-%E5%9B%BE%E7%89%87%E5%A4%A7%E5%B0%8F)8\. 圖片大小圖片太大會增加下載時間和內存的消耗，應根據顯示區域大小合理控制圖片大小。 **得分條件：圖片寬高乘積 <= 實際顯示寬高乘積 \* (設備像素比 ^ 2)** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/performance.html#_9-%E8%AF%B7%E6%B1%82%E8%80%97%E6%97%B6)9\. 請求耗時請求的耗時太長會讓用戶一直等待甚至離開，應當優化好服務器處理時間、減小回包大小，讓請求快速響應。 **得分條件：所有網絡請求都在 1 秒內返回結果** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/performance.html#_10-%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E6%95%B0)10\. 網絡請求數短時間內發起太多請求會觸發小程序并行請求數量的限制，同時太多請求也可能導致加載慢等問題，應合理控制請求數量，甚至做請求的合并等。 **得分條件：通過wx.request發起的耗時超過 300ms 的請求并發數不超過 10 個** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/performance.html#_11-%E5%9B%BE%E7%89%87%E8%AF%B7%E6%B1%82%E6%95%B0)11\. 圖片請求數短時間內發起太多圖片請求會觸發瀏覽器并行加載的限制，可能導致圖片加載慢，用戶一直處理等待。應該合理控制數量，可考慮使用雪碧圖技術或在屏幕外的圖片使用懶加載。 **得分條件：同域名耗時超過 100ms 的圖片請求并發數不超過 20 個** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/performance.html#_12-%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E7%BC%93%E5%AD%98)12\. 網絡請求緩存發起網絡請求總會讓用戶等待，可能造成不好的體驗，應盡量避免多余的請求，比如對同樣的請求進行緩存 **得分條件：3 分鐘以內同一個url請求不出現兩次回包大于 128KB 且一模一樣的內容** # 3、體驗 * * * ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/accessibility.html#_1-%E5%BC%80%E5%90%AF%E6%83%AF%E6%80%A7%E6%BB%9A%E5%8A%A8)1\. 開啟慣性滾動慣性滾動會使滾動比較順暢，在安卓下默認有慣性滾動，而在 iOS 下需要額外設置-webkit-overflow-scrolling: touch的樣式； **得分條件：wxss中帶有overflow: scroll的元素，在 iOS 下需要設置-webkit-overflow-scrolling: touch樣式** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/accessibility.html#_2-%E9%81%BF%E5%85%8D%E4%BD%BF%E7%94%A8-active%E4%BC%AA%E7%B1%BB%E6%9D%A5%E5%AE%9E%E7%8E%B0%E7%82%B9%E5%87%BB%E6%80%81)2\. 避免使用:active偽類來實現點擊態使用 css?:active偽類來實現點擊態，很容易觸發，并且滾動或滑動時點擊態不會消失，體驗較差。建議使用小程序內置組件的 'hover-class' 屬性來實現 **得分條件：不使用:active偽類，并使用hover-class替換:active** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/accessibility.html#_3-%E4%BF%9D%E6%8C%81%E5%9B%BE%E7%89%87%E5%A4%A7%E5%B0%8F%E6%AF%94%E4%BE%8B)3\. 保持圖片大小比例圖片若沒有按原圖寬高比例顯示，可能導致圖片歪曲，不美觀，甚至導致用戶識別困難。可根據情況設置 image 組件的 mode 屬性，以保持原圖寬高比。 **得分條件：顯示的高/寬與原圖的高/寬不超過 15%** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/accessibility.html#_4-%E5%8F%AF%E7%82%B9%E5%87%BB%E5%85%83%E7%B4%A0%E7%9A%84%E5%93%8D%E5%BA%94%E5%8C%BA%E5%9F%9F)4\. 可點擊元素的響應區域我們應該合理地設置好可點擊元素的響應區域大小，如果過小會導致用戶很難點中，體驗很差。 **得分條件：可點擊元素的寬高都不小于 20px** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/accessibility.html#_5-iPhone-X-%E5%85%BC%E5%AE%B9)5\. iPhone X 兼容對于position: fixed的可交互組件，如果渲染在iPhone X的安全區域外，容易誤觸 Home Indicator，應當把可交互的部分都渲染到安全區域內。建議使用以下wxss進行兼容 ~~~ padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); ~~~ **得分條件：position: fixed且高度小于 68px 的可交互組件渲染在安全區域內** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/accessibility.html#_6-%E5%90%88%E7%90%86%E7%9A%84%E9%A2%9C%E8%89%B2%E6%90%AD%E9%85%8D)6\. 合理的顏色搭配文字顏色與背景色需要搭配得當，適宜的顏色對比度可以讓用戶更好地閱讀，提升小程序的用戶體驗。由于顏色搭配的計算方法較為復雜，目前算法還在不斷優化中。因此該指標僅作為評分的提醒項，不計入總分中。 **判斷標準：** **1\. 對于較大字體（font-size >= 24px，或同時滿足font-size >= 19px與font-weight >= 700），文字顏色和背景顏色的對比度不小于3** **2\. 其他字體，文字顏色和背景顏色的對比度不小于4.5** > 對比度計算方法參考[W3C標準](https://www.w3.org/TR/WCAG/#dfn-contrast-ratio) # 4、最佳實踐 * * * ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/best-practice.html#_1-%E9%81%BF%E5%85%8DJS%E5%BC%82%E5%B8%B8)1\. 避免JS異常出現 JavaScript 異常可能導致程序的交互無法進行下去，我們應當追求零異常，保證程序的高魯棒性和高可用性。 **得分條件：不出現任何JS異常** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/best-practice.html#_2-%E9%81%BF%E5%85%8D%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BC%82%E5%B8%B8)2\. 避免網絡請求異常請求失敗可能導致程序的交互無法進行下去，應當保證所有請求都能成功。 **得分條件：所有已授權網絡請求都正常返回，未授權網絡請求需要給出 401 或 403 這兩種狀態碼** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/best-practice.html#_3-%E4%B8%8D%E4%BD%BF%E7%94%A8%E5%BA%9F%E5%BC%83%E6%8E%A5%E5%8F%A3)3\. 不使用廢棄接口使用即將廢棄或已廢棄接口，可能導致小程序運行不正常。一般而言，接口不會立即去掉，但保險起見，建議不要使用，避免后續小程序突然運行異常。 **得分條件：不使用任何文檔中提示廢棄的接口** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/best-practice.html#_4-%E4%BD%BF%E7%94%A8HTTPS)4\. 使用HTTPS 使用HTTPS，可以讓你的小程序更加安全，而HTTP是明文傳輸的，存在可能被篡改內容的風險 **得分條件：所有網絡請求都使用HTTPS** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/best-practice.html#_5-%E9%81%BF%E5%85%8DsetData%E6%95%B0%E6%8D%AE%E5%86%97%E4%BD%99)5\. 避免setData數據冗余 setData操作會引起框架處理一些渲染界面相關的工作，一個未綁定的變量意味著與界面渲染無關，傳入setData會造成不必要的性能消耗。 **得分條件：setData傳入的所有數據都在模板渲染中有相關依賴** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/best-practice.html#_6-%E6%9C%80%E4%BD%8E%E5%9F%BA%E7%A1%80%E5%BA%93%E7%89%88%E6%9C%AC)6\. 最低基礎庫版本當使用的組件/API 的支持版本大于配置的線上最低基礎庫版本時，可能導致相應功能不可用。開發者可通過調整最低基礎庫版本或在代碼上兼容的方式解決該問題。由于用戶可以通過代碼兼容的方式解決該問題，因此該指標僅作為評分的提醒項，不計入總分中。 **判斷標準：不存在使用的組件/API 的支持版本大于配置的線上最低基礎庫版本** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/best-practice.html#_7-%E7%A7%BB%E9%99%A4%E4%B8%8D%E5%8F%AF%E8%AE%BF%E9%97%AE%E5%88%B0%E7%9A%84%E9%A1%B5%E9%9D%A2)7\. 移除不可訪問到的頁面小程序的包大小會影響加載時間，應該盡量控制包體積大小，避免將不會被使用的文件打包進去。由于該項指標依賴開發者的操作路徑，因此僅作為評分的提醒項，不計入總分中。 **判斷標準：不存在訪問不到的頁面被打包到小程序中** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/best-practice.html#_8-WXSS%E4%BD%BF%E7%94%A8%E7%8E%87)8\. WXSS使用率我們應該按需引入 wxss 資源，如果小程序中存在大量未使用的樣式，會增加小程序包體積大小，從而在一定程度上影響加載速度。由于該項指標依賴開發者的操作路徑，因此僅作為評分的提醒項，不計入總分中。 **判斷標準：每個 wxss 資源的未使用部分不超過 2KB** ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/audits/best-practice.html#_9-%E5%8F%8A%E6%97%B6%E5%9B%9E%E6%94%B6%E5%AE%9A%E6%97%B6%E5%99%A8)9\. 及時回收定時器定時器是全局的，并不是跟頁面綁定的，當小程序從一個頁面路由到另一個頁面之后，前一個頁面定時器應注意手動回收。由于該項指標依賴開發者的操作路徑，因此僅作為評分的提醒項，不計入總分中。 **判斷標準：所有定時器的回調執行時所在的頁面都與設置定時器的頁面一致**