乐趣区

智能小程序新增PageonInit功能有效提升性能

为进一步帮助您提升小程序性能,缩短小程序页面渲染时间,智能小程序上线了一个新的生命周期 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 的两种时机,同时应注意:

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

使用建议

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

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

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

验证方式

您有两种方式验证 Page.onInit 的相关功能:

  1. 真机验证:使用 11.20 及以上版本的百度 APP。
  2. 开发者工具:需安装最新版本开发者工具,并将基础库版本设置为 3.160.12 以上,下载地址.

最后,感谢各位开发者积极投身百度小程序的开发当中,在开发过程中有任何问题都可以在社区与官方或其他开发者进行互动,也可将您的意见发送邮件至 smartprogramtech@baidu.com,期待您的参与!

退出移动版