Skip to main content

优化

减少包体积​

合理使用分包​

使用分包加载是优化小程序启动耗时效果最明显的手段。建议开发者按照功能划分，将小程序的功能按使用频率和场景拆分成分包，实现代码包的按需加载。同时需要注意控制分包数量，避免过多拆包。

移除无用文件​

目前小程序打包是会将工程下所有文件都打入代码包内，在开发迭代过程中，如果不及时清理无用的资源，会使得包体积越来越大，开发过程中要养成良好的习惯 -- 及时清理没有使用到的资源，防止资源冗余。控制包内静态资源

避免在代码包中包含或在 tss 中内联过多、过大的代码包内的图片，应尽量采用网络图片。代码包内的图片一般应只包含一些体积较小的图标。声音、视频笑应尽量避免放到代码包中

减少同步逻辑​

优先使用异步 API​

在小程序启动流程中、会注入开发者代码并顺序同步执行 App.onLaunch, App.onShow, Page.onLoad,Page.onShow。

在小程序初始化代码(Page, App 定义之外的内容)和启动相关的几个生命周期中，应避免过度使用 Sync 结尾的同步 API 避免启动时运行过多同步代码在小程序初始化代码(Page，App 定义之外的内容)和启动相关的几个生命周期中，应避免执行复杂的计算逻辑。

更早的展示首屏数据尽早调用关键 API 和请求

首屏绘制可能会依赖 API 数据和网络请求，尽早的调用相关 AP!，发送相关网络请求，能提前数据准备时间。接入数据预取

大部分小程序在渲染首页时、需要依赖服务端的接口数据、小程序为开发者提供了数据预取，方便开发者在小程序冷启动时提前发起请求，并缓存请求内赛

避免非必要的 reLaunchreLaunch 会先关闭所有页面，非必要的 reLaunch 会导致首页白屏时间明显增长。

合理缓存数据​

网络数据缓存 小程序提供了 t.getStorage、t.setStorage 等读写本地缓存的能力，数据存储在本地，返回的会比网络请求快。如果开发者基于某些原因无法采用数据预拉取，我们推荐优先从缓存中获取数据来渲染视图，等待网络请求返回后进行更新。

API 数据缓存对调用频次高的方法的结果进行缓存，例如对于 tt.getSystemlnfo,tt.getSysteminfoSync 的结果应进行缓存，避免重复调用

图片优化​

选择合适的图片格式 对于不需要透明格式的图片，推荐采用 ipeg 格式来代替 png 格式。如果有条件，尽可能使用 webp 格式图片，能大幅缩小图片体积。

进行合理的压缩 图片尽可能压缩到 200kb 以下，压缩的同时也需要兼顾图片的质量使用 CDN 并开启缓存使用 CDN，能大幅减少图片资源的下载速度。开启 HTTP 缓存控制后，下一次加载同样的图片，会直接从缓存读取，大大提升图片加载速度。 2.6 更多优化手段 框架骨架屏 通过小程序框架提供骨架屏机制，能比业务中创建的骨架屏加载时机更靠前，使用这一机制，可以减少用户的白屏等待时长，给用户带来更好的体验。占位组件 为自定义组件配置占位组件，可以指定该组件不在小程序启动时立即注入，而是等到页面中其他元素渲染完成后才注入。通过占位组件，能减少启动耗时

运行时性能体验​

合理使用 setData​

减少发送频率 动画不使用 setData

合理使用自定义组件​

合理的拆分组件数量 Page 中的 setData 会触发渲染层以页面级别进行 dif 操作，如果页面比较复杂且没有使用自定义组件，那么 dif 的成本会很高、导致体验比较差(更新卡顿、不粘手等感受)。如果页面转换为若干个组件，如果在组件中 setData,只会触发渲染层对应组件的 diff 操作，dif 成本会降低很多，使用体验也会提升很多。 只注册当前使用的组件 同时在 usingComponents 建议只注册当前页面有使用到的自定义组件，在小程序框架会根据 usingComponents 中的自定义组件注册(无论开发者在运行时是否有使用)

同步修改初始 data​

在 app.json 中增加配置 component2:true 后，支持在 created 生命周期中修改自定义组件初始数据，自定义组件将在 created 生命周期执行完成后开始渲染。开启后有以下优化点: 1.能够很好的解决依赖计算逻辑导致的 data 频繁变更。避免初始数据依赖大量计算逻辑时，由于 data 变化导致页面渲染内容闪动或频繁变动问题 2.优化 observer 触发方式，减少因数据变更导致的通信，提升小程序性能体验合理的使用方式能进一步提升用户体验

合理监听处理事件​

合理监听处理 scroll 事件​

避免在 scroll 事件中高频执行耗时操作，会明显降低 FPS 去掉不必要的事件绑定 去掉不必要的事件绑定(ttml 中的 bind 和 catch)，从而减少通信的数据量和次数

内存优化​

及时解绑事件监听 事件监听结束后，应及时解绑监听器 及时清理定时器 开发者在开发如「秒杀倒计时」等功能时，可能会使用 setinterval 设置定时器、页面或组件销毁前、需要调用 clearinterval 方法取消定时器,

导航栏适配​

适当开启自定义导航栏 避免在 app.json 中全局开启动态导航栏，仅在需要的页面中配置，降低适配成本。关键信息避开状态栏和胶囊按钮如果开启自定义导航栏，需要通过 t.getCustomButonBoundingClientRect 获取自定义导航栏下不可改变的元素来进行导航栏的适配

分屏适配​

通过 onResize 监听显示区域变化 小程序支持组件和页面的生命周期函数 onResize 用于在显示区域的尺寸发生变化的时候返回当前页面的信息。其中组件需要作为页面配置到 app.json 中触发 事件。 不使用 JS 设置 ScrollView 高度 scrol-view 中分屏变为全屏时需要重新设置 scrol1-view 高度，可能会出现空白区域问题，建议使用 CSS(vh)完成自适应布局。

webview​

针对 webview

  • 使用全局 webview 进行优化
  • 在客户端刚启动时，就初始化一个全局的 Webview 待用，并隐藏
  • 当用户访问了 Webview 时，直接使用这个 webview 加载对应网页并展示