小程序技术要点和性能优化要点【荐藏】

从一个经典的面试题说起：用户首次点击小程序后发生了什么 ？

一般来说会有下面三个过程：

1、有三个点 loading 的白屏 ：下载代码包的阶段

2、没有三个点的白屏（一般很快）：业务代码注入和渲染的阶段

3、数据请求最后呈现：业务代码中异步请求数据

---

详细点来说，小程序加载分下面两个阶段：

预加载阶段，是微信帮我们做的，打开进入小程序之前就做好了

小程序启动会先去拉取代码包 ，说到拉取代码包，那么这里控制包大小其实是很重要的，之前听官方说法是1MB代码差不多1s下载耗时，当然我很久没做小程序了，不知道现在怎么样

常见手段：

1. 压缩代码，清理无用的代码

2. 图片放在cdn

3. 采用分包策略

4. 分包预加载

5. 独立分包（版本要求有点高）

---

请求阶段优化:

1. onLoad 阶段就可以发起请求，不用等ready

2. 请求结果放在缓存中, 下次接着用

3. 请求中可以先展示骨架图

4. 先反馈，再请求。比如说，点赞的按钮，可以先改变按钮的样式，再发起异步请求。(这个跟微博点赞一个道理，默认成功，如果消息队列事务方式处理失败，那么下次进入界面就会看到没有点赞)

---

渲染问题的性能提示：

setData的问题：小程序也是用webView渲染，跟混合APP原理大概一致，那么setData就会有一个通过中间层jsBridge通信的性能损耗问题

混合APP：

小程序：

常见优化手段：

1、减少setData的数据量（去掉那些不影响视图的数据）

2、减少setData次数，频繁的setData可以合并

3、diff思想，精准数据操作，局部更新界面

特别是在下拉加载更多的时候，有时候会卡住，这时候要考虑是不是频繁触发了scroll事件，导致卡顿。

以上

◆ ◆ ◆  ◆ ◆
长按关注小生

你的在看我当成喜欢