微信小程序 性能 与 体验 优化

265 阅读1分钟

1. 合理设置可点击元素的响应区域大小

2. 避免渲染页面耗时过长(渲染区域是否过大???)

3. 避免执行脚本时间过长

4. 不要引入未被使用的wxss样式

5. 文字颜色与背景色搭配较好,适宜阅读

6. 所有资源请求建议使用HTTPS

7. 不要使用废弃的接口

8. 避免过大的WXML节点数目

  • 一个页面少于1000个WXML节点
  • 节点树深度少于30层
  • 子节点树不大于60个

9.避免将不可能被访问到的页面打包到小程序里

10. 及时回收定时器

  • 在小程序中,定时器是全局的,不是随着页面绑定
  • 页面销毁时,需要手动去销毁定时器

11. 避免使用 :active 伪类来实现点击态

  • 体验较差,因为在滑动或者滚动时,点击态是不会消失的
  • 建议使用内置属性 hover 实现

12.滚动区域可开启惯性滚动

  • 安卓默认惯性滚动
  • ios: -webkit-overflow-scrolling:touch

13. 避免JavaScript异常

14. 避免请求耗时太久

15. 避免短时间发起太多的图片请求

  • 短时间发起太多图片请求,会导致浏览器并行现象

16. 避免频繁setData,避免setData数据过大(不要超过1M)

17. 避免未绑定在WXML的变量传入setData