百度智能小程序开发者工具也开始支持体验评分功能，最近依赖该功能对小程序做了优化，对整个优化过程做一下总结整理。
因为小程序包含的页面较多，所以分tab测评，分tab修改。
以下为小程序首次测评得分情况及问题（选了一个比较典型的模块）
image.png
image.png
image.png
解决方法：
-
避免渲染界面耗时过长的情况
image.png
参考了文档https://smartprogram.baidu.com/docs/develop/framework/performance-tips/ setData操作的优化 部分，将文档中变更列表项状态的写法由
items[index].open = !items[index].open;
this.setData('items', items);
变为
this.setData(`items[${index}].open`, !items[index].open);
这样可以避免 setData 时渲染整个 item 列表。
-
避免将未绑定在 SWAN 的变量传入 setData
SWAN 中没有用到的对象用this.data传值 -
合理控制图片大小：存在1个图片太大而有效显示区域较小
图片设置的width、height属性与图片本身比例不符，去掉height，image标签加上mode= "widthfit"属性 -
控制文件个数，避免影响小程序包的解压速率 --- 文件个数超过200
分包加载，不过目前工具会检测子包数量，跟开发工具的同学反馈了，说正在优化中 -
压缩图片以提高加载速度
图片能上传到cdn的都上传到cdn了，tabBar 用到的 icon，替换为cdn地址图片加载不出来，因此保留在本地。官方文档压缩图片推荐的是tinypng, 不过我用的另一个压缩图片的网址 https://www.yasuotu.com/ ，直接用默认的压缩比，上传、下载就可以达到标准，非常方便。
"tabBar": {
"color": "#666",
"selectedColor": "#000",
"borderStyle": "#D6D6D6",
"backgroundColor": "#FFF",
"list": [{
"pagePath": "pages/component/component",
"iconPath": "images/component_normal.png",
"selectedIconPath": "images/component_selected.png",
"text": "组件"
}, {
"pagePath": "pages/api/api",
"iconPath": "images/API_normal.png",
"selectedIconPath": "images/API_selected.png",
"text": "接口"
}, {
"pagePath": "pages/smtui/smtui",
"iconPath": "images/smtui_normal.png",
"selectedIconPath": "images/smtui_selected.png",
"text": "扩展"
}]
}
-
避免使用':active'伪类来实现点击态 --- 存在使用 css ':active' 伪类来实现点击态
将css中'.positive:active' 改为类名样式'.positive-hover'，swan中用hover-class="positive-hover" -
合理设置可点击元素的相应区域大小
点击的元素占面积太小，合理扩大被点击元素的面积，整体展示效果不变 -
避免 setData 的调用过于频繁
onPageScroll 函数变化为某一数值范围时调用 setData，此处增加了throttle 函数 -
所有资源请求都建议使用 HTTPS
经查是map组件发送的http请求，已反馈给组件同学变更为https请求 -
网络图片资源应开启 HTTP 缓存控制
图片服务器开启缓存，不过目前 status 返回 304 的图片也被检测出来未开启 HTTP 缓存，据悉工具的同学正在修复中 -
避免定时器未跟随页面回收
在onUnload中增加
this.timer && clearInterval(this.timer)
tips: 在onHide 中清除定时器，点左上角的back并不会销毁定时器
