支付宝小程序框架性能优化建议

运行原理

与传统的 H5 应用不同，小程序运行架构分为 webview 和 worker 两个部分。webview 负责渲染，worker 则负责存储数据和执行业务逻辑。

webview 和 worker 之间的通信是异步的。这意味着当我们调用 setData 时，我们的数据并不会立即渲染，而是需要从 worker 异步传输到 webview。
数据传输时需要序列化为字符串，然后通过 evaluateJavascript 方式传输，数据大小会影响性能。

优化首屏

首屏有多种定义，这里的首屏是指业务角度第一次有意义的渲染。比如: 对于列表页，首屏就是列表第一次渲染出的内容。

控制小程序资源包大小

当用户访问一个小程序时，支付宝客户端会首先从 CDN 下载小程序资源包，所以资源包的大小会影响小程序启动性能。

优化建议

及时删除无用图片资源，因为所有图片资源都会默认打包进去
控制图片大小，避免使用大图，大图建议从 CDN 渠道上传
及时清理无用代码

将数据请求提前至 onLoad

小程序运行时，先触发页面的 onLoad 生命周期函数，再将页面初始数据（Page data）从 worker 传递到 webview 进行一次初始渲染
页面初始渲染完成，从 webview 发出通知到 worker，触发 onReady 生命周期函数。

部分小程序会在 onReady 中发出请求，导致首屏渲染延缓。

优化建议 将数据请求提前到 onLoad 中。

控制首屏一次性渲染节点数量

业务请求返回后，通常会调用 setData 触发页面重新渲染。执行过程如下:

数据从 worker 传递到 webview
webview 上根据传过来的数据构造虚拟 DOM，并与之前做差异比较（从根节点开始），然后渲染。

由于 worker 与 webview 通信时，数据需要序列化，然后到了 webview 需要执行 evaluateJavascript，因此如果一次性传输数据太大，会影响首屏渲染性能。

另外，如果 webview 上构造节点过多，层级嵌套太深，例如有的小程序列表页面一次性渲染超过 100 个列表项，每个列表项又有嵌套内容，而实际上整个屏幕可能只是显示不到 10 个，会导致差异比较时间较长，同时由于是首屏渲染，会一次性构造很多 DOM，影响首屏渲染性能。

优化建议

setData 数据量不宜过大，避免一次性传递过长的列表。
首屏请勿一次性构造太多节点，服务端可能一次请求传递大量数据，请勿一次性 setData，可先 setData 一部分数据，然后等待一段时间（比如 400ms，具体需要业务调节）再调用 $spliceData 将其他数据传输过去。

优化 setData 逻辑

任何页面变化都会触发 setData，同一时间可能会有多个 setData 触发页面进行重新渲染。如下四个接口都会触发 webview 页面重新渲染。

Page.prototype.setData: 触发整个页面做差异比较
Page.prototype.$spliceData: 针对长列表做优化，避免每次传递整个列表，触发整个页面做差异比较
Component.prototype.setData: 只会从对应组件节点开始做差异比较
Component.prototype.$spliceData: 针对长列表做优化，避免每次传递整个列表，只会从对应组件节点开始做差异比较

优化建议

避免频繁触发 setData 或者 $spliceData，不管是页面级别还是组件级别。在我们分析的案例中，有些页面有倒计时逻辑，但是有的倒计时过于频繁触发（ms 级别的触发）。
需要频繁触发重新渲染时，避免使用页面级别的 setData 和 $spliceData，将这一块封装成自定义组件，然后使用组件级别的 setData 或 $spliceData 触发组件重新渲染。
长列表数据触发渲染时，使用 $spliceData 多次追加数据，而不用传递整个列表。
复杂页面建议封装成自定义组件，减少页面级别的 setData

优化案例

推荐指定路径设置数据：

this.setData({
  'array[0]': 1,
  'obj.x':2,
});

不推荐如下用法（虽然拷贝了this.data, 仍然直接更改了其属性）:

const array = this.data.array.concat();
array[0] = 1;
const obj={...this.data.obj};
obj.x=2;
this.setData({array,obj});

更不推荐直接更改 this.data（违反不可变数据原则）:

this.data.array[0]=1;
this.data.obj.x=2;
this.setData(this.data)

长列表使用 $spliceData：

this.$spliceData({ 'a.b': [1, 0, 5, 6] })

注意

有时业务逻辑封装到了组件中，当组件 UI 需要重新渲染时，只需在组件内部调用 setData。但有时需要从页面触发组件重新渲染，比如在页面上监听了 onPageScroll 事件，当事件触发时，需要通知对应组件重新渲染，此时的处理措施如下所示：

// pages/index/index.js
Page({
    onPageScroll(e) {
        if (this.xxcomponent) {
            this.xxcomponent.setData({
                scrollTop: e.scrollTop
            })
        }
    }
})
// components/index/index.js
Component({
    didMount(){
        this.$page.xxcomponent = this;
    }
})

可在组件的 didMount 中将组件挂载到对应的页面上，即可在页面中调用组件级别的 setData 只触发组件重新渲染。

使用 key 参数

在 for 中使用 key 来提高性能。注意 key 不能设置在 block 上。

示例代码：

<view a:for="{{array}}" key="{{item.id}}"></view>
<block a:for="{{array}}"><view key="{{item.id}}"></view></block>

支付宝小程序框架 性能优化建议

运行原理

优化首屏

控制小程序资源包大小

将数据请求提前至 onLoad

控制首屏一次性渲染节点数量

优化 setData 逻辑

使用 key 参数

支付宝小程序框架性能优化建议