【小程序】百度智能小程序性能文档升级，重磅来袭！
百度智能小程序" title="智能小程序">智能小程序性能文档升级，重磅来袭！
百度小程序技术发布于 2020-06-09
更多内容查看开发者社区/更多招聘信息
近期为帮助开发者提升小程序性能，百度智能小程序上线了 Page.onInit 、xxx（如有其它请补充）等新增功能；同时全面升级了开发者性能文档，从基本原理开始由浅入深，为您解锁各种性能提升新技能！
更多性能优化方案
文档升级后，围绕小程序首屏渲染流程，针对收集 initData、请求主数据环节，和优化渲染速度的角度，为开发者提供了更多性能优化方案。
收集 initData
在收集 initData 这个环节，开发者可通过使用分包、合理使用动态库、合理使用 App.onLaunch 的方式，缩短耗时，从而优化首屏渲染时长。
使用分包
包下载与解析是整个启动过程中的一个重要阶段，该阶段耗时与小程序页面所属包大小呈正相关，将直接影响到 initData 完成收集的时间，从而影响首屏渲染。
开发者可根据实际情况，选择使用下述分包方式：
分包加载:在智能小程序的打包中，默认会有一个主包，主包中包含了启动页面，和所有分包都会用到的公共资源/JS 脚本，根据开发者的配置划分分包。
独立分包:独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。
分包预下载:开发者可以通过配置，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。
合理使用动态库
动态库，是指可被添加到小程序内直接使用的功能组件。由于动态库的独立资源将在逻辑和渲染层分别进行加载，在此过程中将会加载动态库的全部代码（逻辑和样式），然后解析执行。此时如果引用的动态库中包含大量未使用的逻辑，导致加载过程中大量资源的浪费，从而阻塞 initData 的收集时间，进而直接影响到页面渲染。
因此建议开发者合理使用动态库。
合理使用 App.onLaunch
App.onLaunch是进入小程序的第一个生命周期函数，很多开发者会在App.onLaunch中执行一些初始化操作。如果使用不当，会显著影响首屏显示速度。因此建议您在使用中注意如下事项：
- 避免在 App.onLaunch 中执行耗时很长的任务，尽可能将任务推移到页面显示完成后执行。
- 减少、避免在 App.onLaunch 中调用一些同步 API。使用异步 API 代替同步，并尽量减少、延后首页面显示非必需的 API 调用。
- 将 App.onLaunch 中的页面请求放在 Page.onInit 生命周期中
请求主数据
在请求主数据环节，开发者可通过在 onInit 请求首屏主数据、数据前置获取、数据持久化的方式缩短数据加载时间，从而优化首屏渲染时长。
在 onInit 请求首屏主数据
onInit是小程序提供的一种生命周期，执行时机介于 App.onLaunch 和 Page.onLoad 之间。在 setInitData 之后立即执行Page.onInit()，把主数据请求从 Page.onLoad 转移到 Page.onInit 中，将极大提升小程序的页面加载性能。
数据前置获取
通过数据前置获取，可以把关键页面的数据放在入口页面获取，页面跳转至关键页面时，将数据以页面参数的形式传输给落地页。在一些商业线索类页面中，用户进入页面后将立即看到线索相关信息，无需等待。
数据持久化
数据持久化指从服务端获取到的数据，通过swan.setStorage方法保存在本地，页面渲染时直接从本地获取所需数据的这一行为。将固定 banner、筛选、导航等低时效性数据存在本地，页面加载时直接从本地读取、渲染数据，将大幅减少页面上的留白时间，提升用户体验，降低白屏率。
优化渲染速度
开发者可合理使用自定义组件、合理使用 view 和 text 组件、优化图片使用方式、按需渲染优化等方式，有效优化渲染层渲染速度。
合理使用自定义组件
开发者可以将页面内的功能模块抽象成自定义组件，在智能小程序的各个页面中进行使用，提升代码复用度，节省开发成本。
合理使用 view 和 text 组件
框架默认使用高性能的view和text组件，但开发者在组件上使用一些特定属性和任一事件时，会退化为低性能组件。在开发过程中请谨慎使用animation、style、 dataset、hidden等内容，详情查看合理使用 view 和 text 组件。
优化图片使用方式
在智能小程序开发的过程中，经常需要引入图片资源。如果使用图片不当（过多过大的图片），在加载时会消耗更多的系统资源，从而影响整个页面的性能，因此做好图片优化非常重要。开发者可通过下述方式，对图片的使用进行优化：
- 控制大小
- 开启图片懒加载
- 谨慎使用耗费性能的属性
- 使用渐进式 JPEG 来优化用户体验
- 利用体验评分工具检测图片问题
按需渲染优化
在很多业务场景中，小程序渲染的页面的高度是超过一屏的。但在首次进入页面时，只需渲染出可视范围的内容即可。当页面首次渲染完毕后，再继续异步渲染剩下的页面内容。
更多
除上述优化方案外，智能小程序还提供了骨架屏和客户端性能分析工具、模拟器体验评两种性能检测工具，为开发者提升性能保驾护航。
骨架屏
小程序骨架屏是指，打开小程序页面后，在页面解析和数据加载之前，首先给用户展示页面的大概样式。提前加载页面的骨架屏，可以减少用户的白屏等待时长。开发者工具需要 2.15 及其上版本，基础库需要 3.70.53 及其以上版本使用。
客户端性能分析工具
进入开发版智能小程序，进入右上角更多按钮，点击“性能窗口开关“，即可查看各性能面板指标，开发者可根据指标数据有针对性的选择上述优化方式进行性能优化。
模拟器体验评分
体验评分是百度开发者工具推出的一项给智能小程序打分的功能，它会在小程序运行过程中实时检查，分析出影响小程序性能和体验的地方，并给出相应的优化建议。
开发者可在2.23.0及以上版本的开发者工具中，将基础库版本设置为2.0.0以上版本使用。
最后，感谢各位开发者积极投身百度小程序的开发当中，在开发过程中有任何问题都可以在社区与官方或其他开发者进行互动，也可将您的意见发送邮件至[email protected]，期待您的参与！
前端小程序
阅读 674发布于 2020-06-09
本作品系原创，采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
百度小程序技术
293 声望
75 粉丝
百度小程序技术
293 声望
75 粉丝
宣传栏
更多内容查看开发者社区/更多招聘信息
近期为帮助开发者提升小程序性能，百度智能小程序上线了 Page.onInit 、xxx（如有其它请补充）等新增功能；同时全面升级了开发者性能文档，从基本原理开始由浅入深，为您解锁各种性能提升新技能！
更多性能优化方案
文档升级后，围绕小程序首屏渲染流程，针对收集 initData、请求主数据环节，和优化渲染速度的角度，为开发者提供了更多性能优化方案。
收集 initData
在收集 initData 这个环节，开发者可通过使用分包、合理使用动态库、合理使用 App.onLaunch 的方式，缩短耗时，从而优化首屏渲染时长。
使用分包
包下载与解析是整个启动过程中的一个重要阶段，该阶段耗时与小程序页面所属包大小呈正相关，将直接影响到 initData 完成收集的时间，从而影响首屏渲染。
开发者可根据实际情况，选择使用下述分包方式：
分包加载:在智能小程序的打包中，默认会有一个主包，主包中包含了启动页面，和所有分包都会用到的公共资源/JS 脚本，根据开发者的配置划分分包。
独立分包:独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。
分包预下载:开发者可以通过配置，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。
合理使用动态库
动态库，是指可被添加到小程序内直接使用的功能组件。由于动态库的独立资源将在逻辑和渲染层分别进行加载，在此过程中将会加载动态库的全部代码（逻辑和样式），然后解析执行。此时如果引用的动态库中包含大量未使用的逻辑，导致加载过程中大量资源的浪费，从而阻塞 initData 的收集时间，进而直接影响到页面渲染。
因此建议开发者合理使用动态库。
合理使用 App.onLaunch
App.onLaunch是进入小程序的第一个生命周期函数，很多开发者会在App.onLaunch中执行一些初始化操作。如果使用不当，会显著影响首屏显示速度。因此建议您在使用中注意如下事项：
- 避免在 App.onLaunch 中执行耗时很长的任务，尽可能将任务推移到页面显示完成后执行。
- 减少、避免在 App.onLaunch 中调用一些同步 API。使用异步 API 代替同步，并尽量减少、延后首页面显示非必需的 API 调用。
- 将 App.onLaunch 中的页面请求放在 Page.onInit 生命周期中
请求主数据
在请求主数据环节，开发者可通过在 onInit 请求首屏主数据、数据前置获取、数据持久化的方式缩短数据加载时间，从而优化首屏渲染时长。
在 onInit 请求首屏主数据
onInit是小程序提供的一种生命周期，执行时机介于 App.onLaunch 和 Page.onLoad 之间。在 setInitData 之后立即执行Page.onInit()，把主数据请求从 Page.onLoad 转移到 Page.onInit 中，将极大提升小程序的页面加载性能。
数据前置获取
通过数据前置获取，可以把关键页面的数据放在入口页面获取，页面跳转至关键页面时，将数据以页面参数的形式传输给落地页。在一些商业线索类页面中，用户进入页面后将立即看到线索相关信息，无需等待。
数据持久化
数据持久化指从服务端获取到的数据，通过swan.setStorage方法保存在本地，页面渲染时直接从本地获取所需数据的这一行为。将固定 banner、筛选、导航等低时效性数据存在本地，页面加载时直接从本地读取、渲染数据，将大幅减少页面上的留白时间，提升用户体验，降低白屏率。
优化渲染速度
开发者可合理使用自定义组件、合理使用 view 和 text 组件、优化图片使用方式、按需渲染优化等方式，有效优化渲染层渲染速度。
合理使用自定义组件
开发者可以将页面内的功能模块抽象成自定义组件，在智能小程序的各个页面中进行使用，提升代码复用度，节省开发成本。
合理使用 view 和 text 组件
框架默认使用高性能的view和text组件，但开发者在组件上使用一些特定属性和任一事件时，会退化为低性能组件。在开发过程中请谨慎使用animation、style、 dataset、hidden等内容，详情查看合理使用 view 和 text 组件。
优化图片使用方式
在智能小程序开发的过程中，经常需要引入图片资源。如果使用图片不当（过多过大的图片），在加载时会消耗更多的系统资源，从而影响整个页面的性能，因此做好图片优化非常重要。开发者可通过下述方式，对图片的使用进行优化：
- 控制大小
- 开启图片懒加载
- 谨慎使用耗费性能的属性
- 使用渐进式 JPEG 来优化用户体验
- 利用体验评分工具检测图片问题
按需渲染优化
在很多业务场景中，小程序渲染的页面的高度是超过一屏的。但在首次进入页面时，只需渲染出可视范围的内容即可。当页面首次渲染完毕后，再继续异步渲染剩下的页面内容。
更多
除上述优化方案外，智能小程序还提供了骨架屏和客户端性能分析工具、模拟器体验评两种性能检测工具，为开发者提升性能保驾护航。
骨架屏
小程序骨架屏是指，打开小程序页面后，在页面解析和数据加载之前，首先给用户展示页面的大概样式。提前加载页面的骨架屏，可以减少用户的白屏等待时长。开发者工具需要 2.15 及其上版本，基础库需要 3.70.53 及其以上版本使用。
客户端性能分析工具
进入开发版智能小程序，进入右上角更多按钮，点击“性能窗口开关“，即可查看各性能面板指标，开发者可根据指标数据有针对性的选择上述优化方式进行性能优化。
模拟器体验评分
体验评分是百度开发者工具推出的一项给智能小程序打分的功能，它会在小程序运行过程中实时检查，分析出影响小程序性能和体验的地方，并给出相应的优化建议。
开发者可在2.23.0及以上版本的开发者工具中，将基础库版本设置为2.0.0以上版本使用。
最后，感谢各位开发者积极投身百度小程序的开发当中，在开发过程中有任何问题都可以在社区与官方或其他开发者进行互动，也可将您的意见发送邮件至[email protected]，期待您的参与！
以上是 【小程序】百度智能小程序性能文档升级，重磅来袭！ 的全部内容， 来源链接： utcz.com/a/105913.html
得票时间