codecamp

百度智能小程序 智能小程序的启动流程

智能小程序的性能损耗主要发生在页面数据的获取及页面渲染,下图展示了用户从入口点击到首屏渲染的全流程:

基于上图描述的流程,我们接下来继续展开,如何针对该流程的各个环节,采取针对性的优化手段:

1. 用户点击打开小程序

此处是小程序加载的起点。

2. 下载小程序包

小程序在用户第一次打开时会下载最新版本的小程序包。如果包体积过大,会导致下载时间增长。那么可以考虑使用分包能力,并减少不必要的动态库和插件的使用。

我们将会在使用分包合理使用动态库章节介绍该流程的优化方式。

3. 启动智能小程序框架

此时逻辑层和渲染层开始同步初始化:

3.1 初始化智能小程序框架逻辑层

  1. 加载动态库和插件:动态库和插件提供了扩展小程序能力的机制。因为其加载方式是串行的,所以如果引用了不合适的动态库和插件,会导致一定程度性能退化。开发者需要平衡功能和性能的关系,合理使用动态库章节将会详细介绍该流程的优化方式。
  2. 加载逻辑代码:逻辑代码指的是App、页面、自定义组件和使用的其他模块的js模块的集合。如果逻辑代码体积过大会影响逻辑层的启动速度。因此开发者需要考虑按需加载模块,减少代码体积。
  3. 执行onLaunch:加载完必要的资源后,智能小程序框架会执行App.onLaunch相关回调。如果App.onLaunch中执行过多同步阻塞式的逻辑,会导致后续流程阻塞,影响逻辑层启动速度。合理使用 App.onLaunch章节将会详细介绍该流程的优化方式。

完成加载动态库和插件、加载逻辑代码和执行onLaunch后,智能小程序框架逻辑层会收集initData(渲染层进行页面绘制的必要信息,包含了小程序App、页面和自定义组件的初始数据)。initData收集的早晚是衡量逻辑层性能的关键点。

3.2 初始化智能小程序框架渲染层

  1. 加载模板和样式文件:包含app.css、page.css和page.swan等相关文件。这些文件一般较小,对整体性能影响不大。
  2. 加载 SJS :SJS是智能小程序的一套自定义脚本语言。SJS会产生额外的加载逻辑,对性能影响较大,建议仅在必要情况下使用此能力,提升启动性能。
  3. 加载当前页面所有使用到的自定义组件:此处使用到的自定义组件包括插件和动库中使用的组件,如果页面使用到的自定义组件较少,那么可以虑直接将逻辑写入页面模板中,并且酌情使用插件和动态库,我们在合理使用自定义组件章节介绍了该流程的优化。

完成模板和样式文件、SJS和当前页面所有使用到的自定义组件加载后,智能小程序框架渲染层初始化完成。如果逻辑层初始化相对渲染层较慢,那么就是渲染层等待initData到达;反之则是initData到达后,等待渲染层初始化完成。

智能小程序框架完成初始化后,会触发首次内容绘制。

4. 执行页面级的生命周期

首次内容绘制完成后,渲染层向逻辑层发送 firstRendered 事件,逻辑层开始执行生命周期。以生命周期中页面 onLoad 为例,假设开发者在onLoad中请求页面主数据(小程序希望首屏展示给用户的数据)。为了加速主数据的请求速度,可以使用 onInit 生命周期,提前请求主数据。在onInit请求首屏主数据章节将介绍如何优化小程序主数据请求。

完成以上所有流程后,会触发首次有意义的渲染。


百度智能小程序 智能小程序的性能指标
百度智能小程序 加速initData的生成
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

百度智能小程序开发文档

百度智能小程序 组件

百度智能小程序 地图

百度智能小程序 画布

百度智能小程序 API

百度智能小程序 界面

百度智能小程序 关注小程序引导组件

百度智能小程序 自定义组件

百度智能小程序 媒体

百度智能小程序 设备

百度智能小程序 拨打电话

百度智能小程序 内存警报

百度智能小程序 手机联系人

百度智能小程序 用户截屏事件

百度智能小程序 第三方平台

百度智能小程序 开放接口

百度智能小程序 百度收银支付

百度智能小程序 分包预下载

百度智能小程序 数据分析

百度智能小程序 服务端

百度智能小程序 云开发

百度智能小程序 初始化

百度智能小程序 云函数

百度智能小程序 服务端初始化

百度智能小程序 服务器获取上下文

百度智能小程序 服务端云函数

百度智能小程序 开发教程

百度智能小程序 功能开发

百度智能小程序 基本原理

百度智能小程序 小程序自动化

百度智能小程序 视频教程

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }