百度智能小程序性能优化小记

百度智能小程序开发者工具也开始支持体验评分功能，最近依赖该功能对小程序做了优化，对整个优化过程做一下总结整理。
因为小程序包含的页面较多，所以分tab测评，分tab修改。

以下为小程序首次测评得分情况及问题（选了一个比较典型的模块）

image.png

image.png

image.png

解决方法：

1. 避免渲染界面耗时过长的情况
   
   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 列表。

2. 避免将未绑定在 SWAN 的变量传入 setData
   SWAN 中没有用到的对象用 this.data 传值
3. 合理控制图片大小：存在1个图片太大而有效显示区域较小
   图片设置的width、height属性与图片本身比例不符，去掉height，image标签加上 mode= "widthfit" 属性
4. 控制文件个数，避免影响小程序包的解压速率 --- 文件个数超过200
   分包加载，不过目前工具会检测子包数量，跟开发工具的同学反馈了，说正在优化中
5. 压缩图片以提高加载速度
   图片能上传到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": "扩展"
        }]
    }

6. 避免使用':active'伪类来实现点击态 --- 存在使用 css ':active' 伪类来实现点击态
   将css中'.positive:active' 改为类名样式'.positive-hover'，swan中用hover-class="positive-hover"
7. 合理设置可点击元素的相应区域大小
   点击的元素占面积太小，合理扩大被点击元素的面积，整体展示效果不变
8. 避免 setData 的调用过于频繁
   onPageScroll 函数变化为某一数值范围时调用 setData，此处增加了throttle 函数
9. 所有资源请求都建议使用 HTTPS
   经查是map组件发送的http请求，已反馈给组件同学变更为https请求
10. 网络图片资源应开启 HTTP 缓存控制
    图片服务器开启缓存，不过目前 status 返回 304 的图片也被检测出来未开启 HTTP 缓存，据悉工具的同学正在修复中
11. 避免定时器未跟随页面回收
    在onUnload中增加

this.timer && clearInterval(this.timer)

tips: 在onHide 中清除定时器，点左上角的back并不会销毁定时器