# 小程序的优化

双线程架构相关

  • setData 频繁操作(底层是因为双线程架构),可以使用 wx.nextTick 将多次操作延迟到下一次事件循环里
  • 不需要渲染的数据使用_或者直接挂在在 this 下,不要放在 data 中
  • 双线程原因,JS 在独立线程中,setTimeout/setInterval 将作用于全局,所以使用应注意 clear 掉

首屏加载相关

  • 图片懒加载和下拉刷新
  • 分包和预加载(在 onLoad 总发送 http 请求)
  • 骨架屏

代码相关

  • 减少代码包体积:开启代码压缩,善用缓存,减少 http 请求
  • 使用组件:将重复的功能进行统一的封装
  • 在频繁操作的地方使用防抖或节流,比如 onPageScoll
  • 封装重复逻辑,比如用 promise 封装 wx.request。

如何测试优化结果

  • 使用 audits (体验评分)工具,浏览器中对应 Proformance - 查看首屏加载时长 - 网络请求时长 - 通过给出的体验报告,去逐步进行优化。

# 遇到的问题,以及如何解决的。

页面栈爆栈

  • 小程序默认页面栈是 10 层,超出则会跳转失败。
  • 自己封装一个 router,每次跳转时判断一下,如果到了 9 层,在调转就使用 wx.redirectTo

异步问题

  • 很多的 API 都是异步的,比如 wx.request
  • 为了方便使用,将异步封装为 promise

wxss 编写问题

  • wxss 编写太原生
  • 使用 easy-less 或者 webpack 写 less 然后转换为 wxss

IphoneX 的适配

  • 适配下边框 20rpx
  • 通过判断设备类型来编写适配代码。

# 其他

小程序和 Vue 的区别

  • 运行环境
  • 声明周期
  • 代码编写
  • 组件通讯
  • 对于特定的功能,小程序需要基础的支持

TypeScript 给你带来了什么?

  • 开发阶段的静态类型检测
  • 友好的阅读体验
  • 类,接口,泛型的提供
上次更新: 3/10/2021, 5:52:35 PM