小程序性能优化

这篇具有很好参考价值的文章主要介绍了小程序性能优化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

代码包体积优化

1.合理使用分包加载

1.1独立分包

1.2分包预下载

1.3分包异步化

2.避免非必要的全局自定义组件和插件

3.控制代码包内的资源文件

4.及时清理无用代码和资源

代码注入优化

1.启动过程中减少同步API调用

2.启动过程中避免CPU密集型任务

首屏渲染优化

1.使用 按需注入 和 用时注入

2.启用 初始渲染缓存

3. 避免引用未使用的自定义组件

4.精简首屏数据

5.提前首屏数据请求

6.缓存请求数据

7.骨架屏

发版频率控制

小程序运行时优化

1.合理使用setData

1.1 data 只应包含渲染相关的数据

1.2 控制 setData 的频率

1.3 控制 setData 合适的范围

1.4 setData只传递变化的部分

1.5 阻止后台页面setData

渲染性能优化

1. 适当监听页面或组件的scroll事件

2.选择高性能的动画实现方式

3.使用 intersectionObserver 监听元素曝光

4.控制WXML节点数量和层级

5.控制在page构造时传入的自定义数据量

页面切换优化

1.避免在 onHide/onUnload 中执行CPU密集型任务

2.首屏渲染优化

3.提前发起数据请求

4.控制预加载下个页面的时机

资源加载优化

1.控制图片资源大小

2.避免滥用image组件的widthFix/heightFix 模式

内存优化

1.定期处理内存告警问题

2.处理内存泄漏操作


代码包体积优化

1.合理使用分包加载

1.1独立分包

小程序中的某些场景(广告页、活动页、支付页等),通常功能不是很复杂且相对独立,同时对启动性能有很高的要求。

独立分包可以独立于主包合其他分包运行。从独立分包页面进入小程序时,不需要下载主包。

因此将要求高性能的页面放到独立分包中,优化启动速度,提高用户体验。

1.2分包预下载

1.3分包异步化

可以将小程序的分包从页面粒度细化到组件甚至文件粒度。这使得本来只能放在主包页面的部分插件、组件和代码逻辑可以剥离到分包中,并在运行时异步加载,从而进一步降低启动时所需要的包大小和代码量。

  • 组件异步化核心是通过异步加载分包模块的组件同时配合占位组件,来实现组件异步加载完成后进行替换。
  • js逻辑异步化的核心在于使用require方法进行注册。

分包异步化能有效解决主包大小过度膨胀的问题。

2.避免非必要的全局自定义组件和插件

在app.json中通过usingComponents 全局引用的自定义组件和通过 plugins 全局引入的插件,会在小程序启动时随主包一起下载和注入js代码,影响启动耗时。

3.控制代码包内的资源文件

小程序代码包在下载时,会使用ZSTD算法进行压缩,图片、音视频、字体等资源文件会占用较多代码包体积,并且通常难以进一步压缩,对于下载耗时的影响比代码文件打大得多。

静态资源尽量部署到CDN中,并使用URL进行引入(除非要做离线展示)

4.及时清理无用代码和资源

除了工具默认忽略或开发者明确声明忽略的文件,小程序打包回将工程目录下所有文件都打入代码包中。

不定期的分析代码包的文件构成和依赖关系,以此优化代码包大小和内容。或使用webpack、rollup等打包工具,对小程序代码进行预处理,可以利用tree-shaking等特性去除冗余代码,也要注意防止打包时引入不需要的库和依赖。

代码注入优化

1.启动过程中减少同步API调用

在小程序启动过程中,会注入开发者代码并顺序同步执行:App.onlaunchApp.onShowPage.onLoadPage.onShow

在小程序初始化代码和上述启动相关的几个声明周期中,应尽量减少或不调用同步API。绝大多数同步API会以 Sync 结尾,但有部分特例,比如 getSystemInfo (带不带sync都是同步的)

同步API虽然使用简单,但是会阻塞js现成,影响代码执行。

常见的有:

  -- getSystemInfo / getSystemInfoSync

  • 由于历史原因,这两个都是同步的API,同时这两个接口承载过多内容,单次调用耗时会比较长,不建议首屏调用,并且应该在调用后设置缓存,避免重复调用。

  -- getStorageSync / setStorageSync

  • 启动过程中多次续写也会显著影响小程序注入耗时
  • 简单数据共享不建议使用,建议使用 globalData 完成

2.启动过程中避免CPU密集型任务

在小程序初始化代码和启动相关的几个生命周期中,应避免执行复杂的运算逻辑。复杂运算也会阻塞当前js线程,影响启动耗时。建议将复杂的运算延时到启动完成后进行。 

首屏渲染优化

1.使用 按需注入 和 用时注入

2.启用 初始渲染缓存

3. 避免引用未使用的自定义组件

4.精简首屏数据

对于复杂页面可以采用 渐进式渲染 优先展示页面关键内容,对于非关键内容或者不可见部分延迟更新。

同时,与视图渲染无关的数据尽量不要放在 data 中,避免影响页面渲染时间。

5.提前首屏数据请求

小程序提供了如下能力:

数据预拉取

  • 预拉取能够在小程序冷启动时通过微信后台提前向第三方服务器拉取业务数据,当代码包加载完时可以更快的渲染页面,减少用户等待时间,从而提升小程序的打开速度
  • 需要在后台进行配置

周期性更新

  • 周期性更新能够在用户未打开小程序的情况下,也能从服务器提前拉取数据,当用户打开小程序时可以更快的渲染页面,减少用户等待时间,增强在弱网条件下的可用性
  • 同样需要在后台进行配置

6.缓存请求数据

7.骨架屏

发版频率控制

合理的规划版本发布,可以让微信拉取小程序信息更快,因为微信首次拉取小程序信息需要进行版本控制以及监控版本更新。

同时频繁的版本发布会让用户频繁的进行更新,用户会经常体验“首次加载”

小程序运行时优化

1.合理使用setData

setData 是小程序最容易造成性能问题的接口,尽管在使用 uniapp 的情况下,本质上组件更新最终还是会依赖 setData

1.1 data 只应包含渲染相关的数据

  • 渲染无关的数据直接丢到实例的this上
  • 避免使用data在页面或者组件间进行数据共享
  • 渲染间接相关的字段应该设置为纯数据字段(纯数据字段不会参与页面渲染,也就不会和UI线程通信,节约时间),然后通过 observers 控制逻辑更新,但是不能滥用,非data的数据禁止使用

1.2 控制 setData 的频率

  • 每次 setData 都会触发逻辑层虚拟DOM树的遍历和更新,也可能导致触发一次完整的页面渲染流程
  • 过于频繁(遍历过程中setData)会导致对端始终处于繁忙状态,UI交互无法完成,导致用户明显感觉页面卡顿

1.3 控制 setData 合适的范围

  • setData 只会引起 当前组件 和 当前组件的子组件 更新,因此频繁更新(秒杀倒计时等)的区域应抽离为单组件
  • 必要时增加 css contain减少重绘次数和回流范围(layout将回流限制在一定范围内)

1.4 setData只传递变化的部分

  • 如果将整个data传入setData,会增加页面更新开销和数据通信耗时,导致页面卡顿

1.5 阻止后台页面setData

  • 小程序挂在后台的页面数据是处于激活状态的,并且小程序的逻辑线程和UI线程都是共享的同一个线程,因此后台的逻辑更新和UI更新,也会影响前台的卡顿
  • 所有的更新逻辑应控制在页面 onHide 时暂停,在 onShow 后继续
  • 避免后台高频操作,比如定时器

渲染性能优化

1. 适当监听页面或组件的scroll事件

只要用户在 page 构造是传入了 onPageScroll 监听,基础库就会认为开发者需要监听页面scroll事件。此时,事件会以很高的频率从视图层发送到逻辑层,存在一定的通信开销。

使用时需要注意:

  • 非必要不监听scroll
  • 不要保留空的 onPageScroll 函数
  • 实现与滚动相关动画时,优先考虑 滚动驱动动画 或 wxs响应事件
  • 避免滚动事件中频繁调用setData或同步API
  • 避免滚动事件中执行CPU密集型任务

2.选择高性能的动画实现方式

  • 优先使用css渐变、css动画或小程序提供的动画实现方式
  • 避免使用setData实现动画,因为这样会导致频繁调用,极易出现卡顿。如果不得不使用,应改为组件级setData

3.使用 intersectionObserver 监听元素曝光

4.控制WXML节点数量和层级

5.控制在page构造时传入的自定义数据量

页面切换优化

1.避免在 onHide/onUnload 中执行CPU密集型任务

2.首屏渲染优化

3.提前发起数据请求

跳转页面时,可以提前发起请求,对下一个页面做一些准备,使用 eventChannel 将数据传输给下一页。

4.控制预加载下个页面的时机

小程序页面加载完成后,会预加载下一个页面。默认情况下,小程序框架会在当前页面 onReady 触发 200ms 后触发预加载。

在安卓上由于渲染线程中的webview共用同一个线程,因此在预加载下一个页面时会阻塞当前页面setData的执行,造成当前页面和用户交互产生延迟,影响用户看到页面完成内容的时机。

handleWebviewPreload 有如下取值:

  • static:页面onready后200ms触发预加载
  • auto:线程空闲时触发预加载(通过requestAnimateFrame执行判断是否空闲)
  • manual:手动预加载,在调用 wx.preloadWebview() 后执行下一页面预加载

注意:handleWebviewPreload仅支持安卓,低版本配置不生效。

资源加载优化

1.控制图片资源大小

2.避免滥用image组件的widthFix/heightFix 模式

会在图片加载完成后改变图片的尺寸,会引起页面大规模重排,造成抖动。 文章来源地址https://www.toymoban.com/news/detail-517925.html

内存优化

1.定期处理内存告警问题

2.处理内存泄漏操作

到了这里,关于小程序性能优化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序教学系列(4)- 小程序优化与调试

    1. 性能优化技巧 在开发微信小程序时,我们可以采取一些性能优化技巧,以提升小程序的性能表现和用户体验。以下是一些常用的性能优化技巧: 减少网络请求 :尽量合并网络请求,减少不必要的请求次数,可以使用缓存技术来避免重复请求相同的数据。 使用合适的图片格

    2024年02月09日
    浏览(41)
  • 微信小程序树结构选择组件(优化源码)

    实现效果:     1.index.html 2.index.js 3.index.css 4.index.josn 5.页面引用 dataTree:树结构数据(数据结构可以源码中修改) checkrule:回显或设置默认选中的元素

    2024年02月16日
    浏览(39)
  • 微信小程序如何性能测试? —— 华为云性能测试服务(CPTS)压测到服务后端,并完成性能评估

    微信小程序作为手机页面的一种,相比传统的网站和应用来说存在比较特殊的地方: 1、  开发者往往对程序做了限制,只能通过微信客户端访问 2、  通过微信的Oauth进行认证 这样往往会导致我们的性能测试工具无法压测到应用的后台服务,这里就跟大家分享下如何通过华为

    2024年02月11日
    浏览(54)
  • 微信小程序优化多次跳转后卡顿问题

    一、微信小程序多次跳转会产生卡顿的原理 通过wx.navigateTo 跳转,都会出现保留当前页面,打开新的页面机制。 wx.navigateTo不会将旧页面出栈,会将新页面入栈(栈内元素个数增加,栈内元素5个时,不能再跳转)。手机性能好点,可能10次左右才会导致小程序跳转卡顿崩溃。 二

    2024年02月11日
    浏览(131)
  • 微信小程序多图列表页面性能问题为什么会出现?如何解决?

    微信小程序中的多图列表页面性能问题主要是由于以下几个原因导致的: 图片过大:在多图列表页面中,如果图片过大,会导致页面加载时间过长,从而影响用户体验。 请求过多:在多图列表页面中,如果一次请求加载过多的图片,会导致请求次数过多,从而影响页面加载

    2024年03月25日
    浏览(58)
  • 七招教你如何做好微信小程序优化推广

    网络的发展越来越快,不断有新的产品在互联网涌现出来,手机里的软件也是下载了一个又一个。微信小程序的出现给人们的生活提供了一种更为便捷的选择。但是,怎么样在数量庞大的同行中超越竞争对手,让自己的产品受到关注呢?这就需要一些小小的心机了。这里小柚

    2024年02月03日
    浏览(82)
  • 【vue3】uniapp 微信小程序 打包优化【超详细】

    使用HBuilder编辑器编译uniapp的项目转为微信小程序,并上传发布项目 微信小程序官网限制发布的主包大小不能超过2mb,我的项目编译后大小为3mb 1.vendor.js文件过大,打包的时候并没有设置为mini版 2.项目的主包太大,并没有分包出去(后面会详细说明如何分包) 1.把微信小程序右

    2024年02月09日
    浏览(92)
  • 优化微信小程序更新体验:异步更新与强制更新方案解析

    在微信小程序的开发和迭代过程中,新版本覆盖率的问题一直备受关注。由于小程序采用异步更新机制,在用户首次打开或冷启动时才会检查并下载新版本,导致部分用户无法及时应用上最新版本。为了解决这一问题,微信团队经过深入研究和讨论,提出了几种解决方案,并

    2024年01月25日
    浏览(51)
  • 微信小程序的优化方案之主包与分包的研究

    什么是分包? 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。 在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包,即放置默认启动页面/TabBar 页面,以

    2024年02月11日
    浏览(41)
  • uni app 微信小程序 一次性加载几千条数据优化处理

    公司销售订单详情里 机器明细数据超过4、5000台的时候整个页面出现空白,当然也别问我为什么要一次性加载这么多条数据,问就是需求设计如此。 因为需要显示每个类别需要统计总数量、总金额,所以后台返回的数据格式是包裹两层list,前端需要遍历两次。setData一次性能

    2024年02月14日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包