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

news2024/11/16 21:23:53

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

一、是什么

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

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

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

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

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

整体流程如下图:

二、手段

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

加载

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

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

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

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

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

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

渲染

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

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

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

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

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

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

三、总结

小程序启动加载性能

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

小程序渲染性能

  • 避免不当的使用setData
  • 使用自定义组件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1385529.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Spring集成

目录 概述1 声朋一个简单的集成流1.1 使用XML定义集成流1.2 使用Java配置集成流1.3 使用Spring lntegration 的 DSL 配置 2 Spring integration 功能概览2.1 消息通道2.2 过滤器2.3 转换器2.4 路由器2.5 切分器2.6 服务激活器2.7 网关2.8 通道适配器2.9 端点模块 概述 就像我们…

图像识别与计算机视觉有什么区别?

图像识别和计算机视觉在很多方面存在差异,这些差异主要体现在以下几个方面: 1. 研究范围 图像识别是计算机视觉领域的一个子集。计算机视觉不仅包括图像识别,还涵盖了更广泛的内容,如场景理解、目标跟踪、分割、识别和解释等。简而…

说清楚Kubernetes、Docker、Dockershim、Containerd、runC、CRI、OCI的关系

Kubernetes v1.20版本 的 release note 里说 deprecated docker。并且在后续版本 v1.24 正式删除了 dockershim 组件,这对我们有什么影响呢?Kubernetes 1.20: The Raddest Release | Kubernetes 为了搞明白这件事情,以及理解一系列容器名词 …

DC电源模块与AC电源模块的对比分析

DC电源模块与AC电源模块的对比分析 BOSHIDA DC电源模块和AC电源模块是两种常见的电源模块,它们在供电方式、稳定性、适用范围等方面有所不同,下面是它们的对比分析: 1. 供电方式: DC电源模块通过直流电源供电,通常使用…

Java里解压zip和rar包

zip的解压提供了一种方法&#xff0c; rar的解压提供了两种方法&#xff0c;第一种方法是调用命令调用主机安装的解压缩工具&#xff0c; 第二种方法&#xff0c;需要注意一下&#xff0c;需要导一个包 <dependency><groupId>com.github.junrar</groupId>&l…

NR C-DRX inactivity Timer的工作原理

drx-inactivityTimer 是C-DRX中比较关键的一个timer&#xff0c;这里是其工作流程的总结。 inactivity-timer是UE等待成功解码PDCCH的持续时间&#xff0c;从PDCCH的最后一次成功解码开启&#xff0c;timer超时后UE可以返回sleep。 UE 应在一次成功解码PDCCH 后重新启动inactiv…

优优嗨聚集团:债务逾期,如何应对与解决?

在现代社会&#xff0c;债务问题已成为越来越多人面临的难题。债务逾期不仅会给个人带来巨大的经济压力&#xff0c;还会影响个人信用记录&#xff0c;甚至可能引发法律纠纷。那么&#xff0c;当债务逾期时&#xff0c;我们应该如何应对与解决呢&#xff1f; 一、了解债务情况 …

数据库——DAY1(Linux上安装MySQL8.0.35(网络仓库安装))

一、环境部署 1、Red Hat Enterprise Linux 9.3 64 位 2、删除之前安装过本地镜像版本的MySQL软件&#xff08;以前未安装过&#xff0c;请跳过此步骤&#xff09; [rootlocalhost ~]# dnf remove mysql-server -y [rootlocalhost ~]# rm -rf /var/lib/mysql [rootlocalhost …

带你了解烧结钕铁硼的成型工艺

与传统的粉末冶金工艺相比&#xff0c;钕铁硼的成型具有磁场取向和氧化防护这两大特点&#xff0c;成型过程基本决定了磁体的几何形状、尺寸和取向度&#xff0c;是烧结钕铁硼制备的关键环节&#xff0c;成型一般分为干压和湿压两大类。 图片来源&#xff1a;曹帅&#xff0c;烧…

梦回2004!我用全志V3s做了个成本100元,功能媲美MP4的随身终端

本项目是基于全志V3S的随身终端&#xff08;类似MP4&#xff09;&#xff0c;命名为V3S-PI&#xff0c;开发板使用四层板制作&#xff0c;全板采用0603电容电阻&#xff0c;相较于0402&#xff0c;制作更为方便&#xff0c;同时成本可压缩至100以内。 项目简介 开发板选用全志…

Linux多网卡绑定实现负载均衡详解

将多块网卡绑定同一IP地址对外提供服务&#xff0c;可以实现高可用或者负载均衡。直接给两块网卡设置同一IP地址是不可以的。通过 bonding&#xff0c;虚拟一块网卡对外提供连接&#xff0c;物理网卡的被修改为相同的MAC地址。 目录 1、bond的作用 2、Bonding聚合链路工作模…

pyqt5 pyinstaller 打包 QThread QLable QscrollArea 滑动 红果短剧

废话 不多说&#xff0c;直接上代码&#xff01;&#xff01;&#xff01; UI.py self.scrollArea QtWidgets.QScrollArea(self.centralwidget)self.scrollArea.setGeometry(QtCore.QRect(20, 130, 541, 511))self.scrollArea.setWidgetResizable(True)self.scrollArea.setOb…

idea2018导入多个javaweb项目-学习笔记

多个javaweb项目导入 file-> Project Structure 确认&#xff0c;test项目的依赖jar包&#xff0c;引入tomcat jar包。 到此导入javaweb并配置完成 </article>

延迟减少10倍!OCD:基于以目标为中心Diffusion的高效视频编辑方法

基于扩散的视频编辑已经取得了令人瞩目的质量&#xff0c;可以根据文本编辑提示转换给定视频输入的全局风格、局部结构和属性。然而&#xff0c;这类解决方案通常需要大量的内存和计算成本来生成时间上连贯的帧&#xff0c;无论是以扩散反演还是跨帧注意力的形式。在本文中&…

MtimeMtimecmp

Mtime: 实时time计数器&#xff0c;可读可写&#xff1b;mtime必须按照一个固定的频率递增&#xff1b;如果count overflow了&#xff0c;则mtime的值需要卷绕&#xff1b;对于32/64的系统来说&#xff0c;mtime的值都是64bits的&#xff1b; 与mtime对应的&#xff0c;还有一…

uniap vue3 组件使用uni.createSelectorQuery() 获取dom报错

由于vue3中没有this&#xff0c;所以使用uni.createSelectorQuery().in(this)时&#xff0c;会报错 使用 getCurrentInstance 获取组件实例 使用 uni.createSelectorQuery() 批量查询时&#xff0c;结果是按照查询的顺序返回的 使用示例 import { getCurrentInstance } from…

70.网游逆向分析与插件开发-角色数据的获取-自动化助手UI显示角色数据

内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;利用技能点属性分析角色数据基址-CSDN博客 码云地址&#xff08;ui显示角色数据 分支&#xff09;&#xff1a;https://gitee.com/dye_your_fingers/sro_-ex.git 码云版本号&#xff1a;367aa71f60b…

conda环境下No module named ‘pytorch_lightning‘问题解决

1 问题描述 在训练wav2lip模型时&#xff0c;出现如下错误&#xff1a; D:\.conda\wav2lip\python.exe D:/ml/wav2lip384/parallel_syncnet_tanh.py --data_root D:/ml/Wav2Lip/data/25fps_out/ --checkpoint_dir syncnet_checkpoints/ --checkpoint_path Traceback (most re…

怎样获取power shell 的全部可用命令?5/5(篇幅有点长,分成5份)

在power shell 窗口中&#xff0c;有一个获取全部可用命令的命令&#xff1a;get-command&#xff0c;获取到的命令有1640多个&#xff0c;够学习了吧&#xff1f;那么&#xff0c;power shell 命令有哪些类别呢&#xff1f; PowerShell命令可以分为以下几类&#xff1a; Cmd…

LeetCode 每日一题 Day 37-43

终于考完试了&#xff0c;寒假期间将会每天持续更新&#xff01; 447. 回旋镖的数量(Day 37) 给定平面上 n 对 互不相同 的点 points &#xff0c;其中 points[i] [xi, yi] 。回旋镖 是由点 (i, j, k) 表示的元组 &#xff0c;其中 i 和 j 之间的欧式距离和 i 和 k 之间的欧…