小程序优化


外圆内方 2019-12-31 小程序

入手的几个方面

  1. 网络请求
  2. 数据渲染
  3. UI
  4. 其他

一、网络请求

  1. 缓存,避免多余的请求。
  2. 不使用废弃的接口,保证请求响应正常。
  3. 避免短时间内发起太多的请求,提高响应速度
  4. 使用 https

二、数据渲染

图1 注:setData 用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。所以 setData 会在 js 事件队列执行完后,再执行渲染(setData 第二个参数函数也是在这个时候执行)

  1. 避免 setData 的数据过大
  2. 避免 setData 调用过于频繁
  3. 不用绑定在 WXML 上的变量就不要使用 setData
  4. 避免过大的节点数目:a. 一个页面小于 1000 个节点。 b. 节点树深度少于 30 层。 c. 子节点数小于 60 个。

三、UI

  1. 合理设置可点击元素相应区域
  2. 不引入未使用的样式文件
  3. 文字颜色与背景搭配,方便用户阅读

四、其他

  1. ios:开启 -webkit-overflow-scrolling:touch 惯性滚动
  2. 提高代码健壮性,避免出现 js 异常
  3. 避免脚本执行时间过长
  4. 避免定时器,定时器在小程序是全局的,注意销毁定时器

在 小程序开发工具 audits 面板中, 可以进行小程序体验评分。打开小程序体验评分后点击页面进行测试,开发工具会帮助分析小程序要改进的地方。或者在开发中打开详情->本地配置->勾选自动运行体验评分,就可以在 audits 面板中实时监控性能。