百度智能小程序 體驗評分

2020-09-05 15:15 更新

評分標(biāo)準(zhǔn)

體驗評分從三個方面來評估智能小程序，分別是性能、體驗、最佳實踐。每個分類下的權(quán)重見下面的表格。

性能

評分規(guī)則 說明 標(biāo)準(zhǔn) 權(quán)重
渲染界面時間 渲染界面時間指的是首次渲染 (initData) 或因數(shù)據(jù)變化 (setData) 帶來的頁面結(jié)構(gòu)變化的渲染花費(fèi)的時間。渲染界面的耗時過長會讓用戶覺得卡頓，體驗較差，出現(xiàn)這一情況時，需要校驗下是否同時渲染的區(qū)域太大（例如列表過長），或渲染依賴的計算是否過于復(fù)雜。 單次渲染時間不超過 500 ms 7
腳本執(zhí)行時間 腳本執(zhí)行時間是指 JS 腳本在一次同步執(zhí)行中消耗的時間，比如生命周期回調(diào)、事件處理函數(shù)的同步執(zhí)行時間。執(zhí)行腳本的耗時過長讓用戶覺得卡頓，體驗較差，出現(xiàn)這一情況時，需要確認(rèn)并優(yōu)化腳本的邏輯。 一個執(zhí)行周期內(nèi)腳本運(yùn)行時間不超過 1 秒 6
setData 調(diào)用頻率 setData 接口的調(diào)用涉及邏輯層與渲染層間的線程通信，通信過于頻繁可能導(dǎo)致處理隊列阻塞，界面渲染不及時而導(dǎo)致卡頓，應(yīng)避免無用的頻繁調(diào)用 每秒調(diào)用 setData 的次數(shù)不超過 20 次 7
setData 數(shù)據(jù)大小 由于小程序運(yùn)行邏輯線程與渲染線程之上，setData 的調(diào)用會把數(shù)據(jù)從邏輯層傳到渲染層，數(shù)據(jù)太大會增加通信時間。 setData 的數(shù)據(jù)在 JSON.stringify 后不超過 256 KB 6
避免 setData 數(shù)據(jù)冗余 setData 操作會引起框架處理一些渲染界面相關(guān)的工作，一個未綁定的變量意味著與界面渲染無關(guān)，傳入 setData 會造成不必要的性能消耗。 setData 傳入的所有數(shù)據(jù)都在模板渲染中有相關(guān)依賴 3
SWAN 節(jié)點數(shù) 建議一個頁面使用少于 1000 個 SWAN 節(jié)點，節(jié)點樹深度少于 30 層，子節(jié)點數(shù)不大于 60 個。一個太大的 SWAN 節(jié)點樹會增加內(nèi)存的使用，樣式重排時間也會更長 頁面 SWAN 節(jié)點少于 1000 個，節(jié)點樹深度少于 30 層，子節(jié)點數(shù)不大于 60 個 5
請求耗時 請求的耗時太長會讓用戶一直等待甚至離開，應(yīng)當(dāng)優(yōu)化好服務(wù)器處理時間、減小回包大小，讓請求快速響應(yīng)。 所有網(wǎng)絡(luò)請求都在 1 秒內(nèi)返回結(jié)果 7
網(wǎng)絡(luò)請求頻率 短時間內(nèi)發(fā)起太多請求會觸發(fā)小程序并行請求數(shù)量的限制，同時太多請求也可能導(dǎo)致加載慢等問題，應(yīng)合理控制請求數(shù)量，甚至做請求的合并等。 每秒通過 swan.request 發(fā)起的請求數(shù)不超過 10 個 4
圖片請求頻率 短時間內(nèi)發(fā)起太多圖片請求會觸發(fā)瀏覽器并行加載的限制，可能導(dǎo)致圖片加載慢，用戶一直處于等待狀態(tài)。應(yīng)該合理控制數(shù)量，可考慮使用雪碧圖技術(shù)或在屏幕外的圖片使用懶加載。 每秒發(fā)起的圖片請求數(shù)不超過 20 個 4
網(wǎng)絡(luò)請求緩存 發(fā)起網(wǎng)絡(luò)請求總會讓用戶等待，可能造成不好的體驗，應(yīng)盡量避免多余的請求，比如對同樣的請求進(jìn)行緩存 3 分鐘以內(nèi)同一個 url 請求不出現(xiàn)兩次回包大于 128KB 且一模一樣的內(nèi)容 1
圖片緩存 開啟 HTTP 緩存控制后，下一次加載同樣的圖片，會直接從緩存讀取，大大提升加載速度。 所有圖片均開啟 HTTP 緩存 4
圖片大小 圖片太大會增加內(nèi)存的消耗，應(yīng)根據(jù)顯示區(qū)域大小合理控制圖片大小。 圖片寬高都不超過實際顯示寬高的 3 倍 4
文件數(shù)量 小程序的解壓過程包含了文件 Hash 值的對比，文件數(shù)量過多會影響到解壓速率。 文件數(shù)量少于 200 個 8
圖片壓縮 小程序包內(nèi)的圖片壓縮可以減少包體積，對于網(wǎng)絡(luò)圖片，壓縮也可以提高圖片的下載速度。 小程序包內(nèi)圖片無損壓縮后體積減少 10% 以內(nèi) 1

體驗

評分規(guī)則 說明 標(biāo)準(zhǔn) 權(quán)重
避免使用 :active 偽類來實現(xiàn)點擊態(tài) 使用 css :active 偽類來實現(xiàn)點擊態(tài)，很容易觸發(fā)，并且滾動或滑動時點擊態(tài)不會消失，體驗較差。
建議使用小程序內(nèi)置組件的 hover-* 屬性來實現(xiàn)。		 不使用 :active 偽類，使用 hover-class 替換 :active 8
保持圖片大小比例 圖片若沒有按原圖寬高比例顯示，可能導(dǎo)致圖片歪曲，不美觀，甚至導(dǎo)致用戶識別困難。
可根據(jù)情況設(shè)置 image 組件的 mode 屬性，以保持原圖寬高比。		 顯示的高/寬與原圖的高/寬不超過 10% 4
可點擊元素的響應(yīng)區(qū)域 我們應(yīng)該合理地設(shè)置好可點擊元素的響應(yīng)區(qū)域大小，如果過小會導(dǎo)致用戶很難點中，體驗很差。 可點擊元素的寬高都不小于 20px 7
合理的顏色搭配 文字顏色與背景色需要搭配得當(dāng)，適宜的顏色對比度可以讓用戶更好地閱讀，提升小程序的用戶體驗。 · 較大字體(font-size >= 24px，或同時滿足 font-size >= 19px 與 font-weight >= 700）：文字顏色和背景顏色的對比度不小于 1.2；
· 其他字體：文字顏色和背景顏色的對比度不小于 1.25。		 0

最佳實踐

評分規(guī)則 說明 標(biāo)準(zhǔn) 權(quán)重
避免 JS 異常 出現(xiàn) JavaScript 異?？赡軐?dǎo)致程序的交互無法進(jìn)行下去，我們應(yīng)當(dāng)追求零異常，保證程序的高魯棒性和高可用性。 不出現(xiàn)任何 JS 異常。 3
避免網(wǎng)絡(luò)請求異常 請求失敗可能導(dǎo)致程序的交互無法進(jìn)行下去，應(yīng)當(dāng)保證所有請求都能成功。 所有網(wǎng)絡(luò)請求都正常返回 3
使用 HTTPS 使用 HTTPS，可以讓你的小程序更加安全，而 HTTP 存在數(shù)據(jù)泄露和被篡改內(nèi)容的風(fēng)險。 所有網(wǎng)絡(luò)請求都使用 HTTPS 1
移除不可訪問到的 template 小程序的包大小會影響加載時間，應(yīng)該盡量控制包體積大小，避免將不會被使用的文件打包進(jìn)去。 不存在訪問不到的 template 被打包到小程序中。 0
CSS 使用率 我們應(yīng)該按需引入 CSS 資源，如果小程序中存在大量未使用的樣式，會增加小程序包體積大小，從而在一定程度上影響加載速度。 每個 CSSS 資源的未使用部分不超過 2KB 0
及時回收定時器 定時器是全局的，并不是跟頁面綁定的，當(dāng)頁面因后退被銷毀時，定時器應(yīng)注意手動回收。 所有定時器的回調(diào)執(zhí)行時所在的頁面都與設(shè)置定時器的頁面一致。 0



以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號