【面试合集】说说提高微信小程序的应用速度的手段有哪些?

面试官:说说提高微信小程序的应用速度的手段有哪些?

一、是什么

小程序启动会常常遇到如下图场景:

这是因为,小程序首次启动前,微信会在小程序启动前为小程序准备好通用的运行环境,如运行中的线程和一些基础库的初始化

然后才开始进入启动状态,展示一个固定的启动界面,界面内包含小程序的图标、名称和加载提示图标。此时,微信会在背后完成几项工作:

  • 下载小程序代码包
  • 加载小程序代码包
  • 初始化小程序首页

下载到的小程序代码包不是小程序的源代码,而是编译、压缩、打包之后的代码包

整体流程如下图:

二、手段

围绕上图小程序的启动流程, 我们可以从加载、渲染两个纬度进行切入:

加载

提升体验最直接的方法是控制小程序包的大小,常见手段有如下:

  • 代码包的体积压缩可以通过勾选开发者工具中"上传代码时,压缩代码"选项

  • 及时清理无用的代码和资源文件

  • 减少资源包中的图片等资源的数量和大小(理论上除了小icon,其他图片资源从网络下载),图片资源压缩率有限

并且可以采取分包加载的操作,将用户访问率高的页面放在主包里,将访问率低的页面放入子包里,按需加载

当用户点击到子包的目录时,还是有一个代码包下载的过程,这会感觉到明显的卡顿,所以子包也不建议拆的太大,当然我们可以采用子包预加载技术,并不需要等到用户点击到子包页面后在下载子包

渲染

关于微信小程序首屏渲染优化的手段如下:

  • 请求可以在页面onLoad就加载,不需要等页面ready后在异步请求数据
  • 尽量减少不必要的https请求,可使用 getStorageSync() 及 setStorageSync() 方法将数据存储在本地
  • 可以在前置页面将一些有用的字段带到当前页,进行首次渲染(列表页的某些数据--> 详情页),没有数据的模块可以进行骨架屏的占位

在微信小程序中,提高页面的多次渲染效率主要在于正确使用setData

  • 不要过于频繁调用setData,应考虑将多次setData合并成一次setData调用
  • 数据通信的性能与数据量正相关,因而如果有一些数据字段不在界面中展示且数据结构比较复杂或包含长字符串,则不应使用setData来设置这些数据
  • 与界面渲染无关的数据最好不要设置在data中,可以考虑设置在page对象的其他字段下

除此之外,对于一些独立的模块我们尽可能抽离出来,这是因为自定义组件的更新并不会影响页面上其他元素的更新

各个组件也将具有各自独立的逻辑空间。每个组件都分别拥有自己的独立的数据、setData调用

三、总结

小程序启动加载性能

  • 控制代码包的大小
  • 分包加载
  • 首屏体验(预请求,利用缓存,避免白屏,及时反馈

小程序渲染性能

  • 避免不当的使用setData
  • 使用自定义组件
相关推荐
2501_9159214313 小时前
穿越HTTPS迷雾:Wireshark中的TLS抓包秘诀与文件合并方法
网络协议·ios·小程序·https·uni-app·wireshark·iphone
PinTrust SSL证书14 小时前
Sectigo(Comodo)企业型OV通配符SSL
网络·网络协议·网络安全·小程序·https·ssl
头发还在的女程序员14 小时前
家政系统源码,上门家政源码,支持小程序、APP、H5和公众号,可直接搭建使用
小程序·生活·家政
小徐_233314 小时前
uni-app 组件库 Wot UI 2.0 发布了,我们带来了这些改变!
前端·微信小程序·uni-app
黄华SJ520it14 小时前
天美仕商城平台开发代码
小程序·软件需求·系统开发
Greg_Zhong15 小时前
微信小程序中实现自定义颜色选择器(简陋版对比精致版)
微信小程序·自定义颜色选择器面板
小离a_a16 小时前
uniapp小程序添加路由全局限制,增加路由白名单,登录后接口跳转参数正常传递
小程序·uni-app
Giggle121816 小时前
家政维修保洁预约上门服务小程序软件开发解析
大数据·小程序·产品运营·个人开发·内容运营
宋拾壹16 小时前
php网站小程序接入抖音团购核销
android·小程序·php
杰建云16716 小时前
2026年第三方平台制作微信小程序多少钱?
微信小程序·小程序·小程序制作