• 評(píng)分標(biāo)準(zhǔn)
  • 性能
  • 體驗(yàn)
  • 最佳實(shí)踐

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

體驗(yàn)評(píng)分從三個(gè)方面來(lái)評(píng)估智能小程序，分別是性能、體驗(yàn)、最佳實(shí)踐。每個(gè)分類下的權(quán)重見(jiàn)下面的表格。

在榕城等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供做網(wǎng)站、網(wǎng)站設(shè)計(jì) 網(wǎng)站設(shè)計(jì)制作定制設(shè)計(jì),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),高端網(wǎng)站設(shè)計(jì),營(yíng)銷型網(wǎng)站,外貿(mào)網(wǎng)站建設(shè),榕城網(wǎng)站建設(shè)費(fèi)用合理。

性能

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

體驗(yàn)

評(píng)分規(guī)則	說(shuō)明	標(biāo)準(zhǔn)	權(quán)重
避免使用:active偽類來(lái)實(shí)現(xiàn)點(diǎn)擊態(tài)	使用 CSS:active偽類來(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-*屬性來(lái)實(shí)現(xiàn)	不使用:active偽類，使用hover-class替換:active	8
保持圖片大小比例	圖片若沒(méi)有按原圖寬高比例顯示，可能導(dǎo)致圖片歪曲，不美觀，甚至導(dǎo)致用戶識(shí)別困難 可根據(jù)情況設(shè)置 image 組件的 mode 屬性，以保持原圖寬高比	顯示的高 / 寬與原圖的高 / 寬不超過(guò) 10%	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	7
合理的顏色搭配	文字顏色與背景色需要搭配得當(dāng)，適宜的顏色對(duì)比度可以讓用戶更好地閱讀，提升小程序的用戶體驗(yàn)	·較大字體（font-size >= 24px ，或同時(shí)滿足 font-size >= 19px 與 font-weight >= 700）：文字顏色和背景顏色的對(duì)比度不小于 1.2 ·其他字體：文字顏色和背景顏色的對(duì)比度不小于 1.25	0

最佳實(shí)踐

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

當(dāng)前題目：創(chuàng)新互聯(lián)百度小程序教程：評(píng)分標(biāo)準(zhǔn)
URL標(biāo)題：http://m.fisionsoft.com.cn/article/dpijpjd.html