为进一步帮助您提升小程序性能,缩短小程序页面渲染时间,智能小程序上线了一个新的生命周期 Page.onInit,您可在3.160.12 及以上的基础库版本中使用。
有效提升性能
以百度知道小程序为例,使用 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
的视图信息。
使用建议
关于Page.onInit
的接口文档和使用说明,请阅读官方文档onInit(Object query)。
此处列举一些onInit
的使用限制和建议:
- 不能进行任何依赖视图层的操作,包括且不限于:
selectComponent
、selectAllComponents
、swan.createSelectorQuery
、swan.createMapContext
、swan.createCameraContext
、swan.createCanvasContext
等; - 由于并非所有版本的基础库都支持此生命周期,开发者可以参考官方文档中的代码片段,增加兼容逻辑;
- 如果您的小程序在逻辑线程初始化阶段存在较大瓶颈,那么使用
Page.onInit
可能不会有明显效果。建议从减少动态库和插件的使用、减少App.onLaunch
耗时等角度进行优化。
验证方式
您有两种方式验证Page.onInit
的相关功能:
- 真机验证:使用 11.20 及以上版本的百度 APP 。
- 开发者工具:需安装 3.8.0 及以上稳定版或rc版的开发者工具,并将基础库版本设置为3.160.12以上,下载地址.
最后,感谢各位开发者积极投身百度小程序的开发当中,在开发过程中有任何问题都可以在社区与官方或其他开发者进行互动,也可将您的意见发送邮件至smartprogramtech@baidu.com,期待您的参与!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。