性能神器——Page.onInit

原创于 2020-06-02 10:15:47 发布

· 4.4k 阅读

0 ·

版权

文章标签：

#小程序 #百度

为进一步帮助您提升小程序性能，缩短小程序页面渲染时间，智能小程序上线了一个新的生命周期 Page.onInit，您可在3.160.12 及以上的基础库版本中使用。

更多内容查看开发者社区/更多招聘信息

性能的意义

小程序性能是指小程序在百度 APP 或其它宿主 APP 中加载和呈现的速度，以及小程序对用户交互的响应程度。性能欠佳的小程序显示速度和对输入响应的速度较慢，甚至会出现内容不可访问的情况，这将在不同程度上影响用户体验，从而导致用户流失。良好的性能可以帮助开发者留住用户，提高转换率。

有效提升性能

以百度知道小程序为例，使用 Page.onInit 进行优化后，上屏时长约提升了 210ms。

在这里插入图片描述

以下是百度知道、百度百科和宝宝知道使用Page.onInit后的收益：

小程序	收益(单位 ms)
百度知道	210
百度百科	100
宝宝知道	150

什么是`Page.onInit`

Page.onInit 是百度智能小程序提供一种页面级别的生命周期。该生命周期函数执行时机远早于页面中的其他生命周期。

如果您在Page.onInit中去发起网络请求，会提前获取页面数据。因此会缩短页面的渲染时间，极大提升小程序的用户体验。

如果您对小程序启动原理感兴趣，可参考下图小程序的启动流程，Page.onInit是在收集initData发送setInitData后立即执行。由此可见，页面主数据的请求放在 onInit 中，将快于页面的其他生命周期。
在这里插入图片描述

如果您想了解Page.onInit的细节原理，可参考下图，小程序是在 setInitData 之后立即执行Page.onInit。

在这里插入图片描述

如果把主数据请求从 Page.onLoad 转移到 Page.onInit 中，将极大提升小程序的页面加载性能。

开发者可以在onInit中向服务器请求数据，并执行setData。图中展示了setData的两种时机，同时应注意：

如果setData发出的时机早于渲染线程的 FCP，那么在onLoad中将能获取到本次setData的视图信息。
如果setData晚于 FCP,那么onLoad中将获取不到本次setData的视图信息。

onInit(Object query)

页面初始化时触发。一个页面只会调用一次，可以在 onInit 的参数中获取打开当前页面路径中的参数。
onInit 执行时机早于 onLoad。如果开发者有性能优化的需求，建议将页面的数据网络请求放在 Page.onInit 中，并在网络请求的回调中执行 setData，可以提升页面的加载速度。

代码示例

function getData(param) {
    return new Promise((resolve, reject) => {
        swan.request({
            url: 'xxx',
            success: res => resolve(res)
        });
    });
}
Page(
    // 使用一个标记位，确保只请求一次主数据
    hasRequest: false
    data: {
       value: ''
    },
    onInit(param) {
        if (!this.hasRequest) {
            this.hasRequest = true;
            getData(param).then(res => {
                this.setData({
                    value: res.data
                });
            })
        }
    },
    onLoad(param) {
        if (!this.hasRequest) {
            this.hasRequest = true;
            getData(param).then(res => {
                this.setData({
                    value: res.data
                });
            })
        }
    }
);

使用建议

关于Page.onInit的接口文档和使用说明，请阅读官方文档onInit(Object query)。

此处列举一些onInit的使用限制和建议：

不能进行任何依赖视图层的操作，包括且不限于：selectComponent、selectAllComponents、swan.createSelectorQuery、swan.createMapContext、swan.createCameraContext、swan.createCanvasContext等；
由于并非所有版本的基础库都支持此生命周期，开发者可以参考官方文档中的代码片段，增加兼容逻辑；
如果您的小程序在逻辑线程初始化阶段存在较大瓶颈，那么使用Page.onInit可能不会有明显效果。建议从减少动态库和插件的使用、减少App.onLaunch耗时等角度进行优化。