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

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

一、是什么

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

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

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

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

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

整体流程如下图:

二、手段

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

加载

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

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

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

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

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

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

渲染

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

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

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

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

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

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

三、总结

小程序启动加载性能

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

小程序渲染性能

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

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

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

相关文章

Endothelin-1(内皮素-1) ELISA kit

灵敏、快速的内皮素-1 ELISA试剂盒,适用于心血管和应激相关研究 内皮素(Endothelin, ET)是由血管内皮细胞产生的异肽,具有强大的血管收缩活性。这种肽由三个独立的基因编码,经过加工产生39个残基的 大ET 分子&#xff…

服务器 conda update 失败解决方法

1. 强制 conda update 租借一台服务器,发现 conda 版本是4.10.3,需要升级,使用了如下命令都没有效果,仍然是一样的版本 conda update conda update --all conda update -n base -c defaults conda最后强制用conda-forge通道更新…

D25XB60-ASEMI电机整流桥D25XB60

编辑:ll D25XB60-ASEMI电机整流桥D25XB60 型号:D25XB60 品牌:ASEMI 封装:GBJ-5(带康铜丝) 特性:插件、整流桥 平均正向整流电流(Id):25A 最大反向击穿…

Jenkins实现自作自定义镜像并推送Harbor并编写目标服务器准备脚本

Jerkin 制作自定义镜像推送到Harbor docker build -t mytest:$tag . docker login -u admin -p Harbor12345 178.119.30.133:80 docker tag mytest:$tag 178.119.30.133:80/repo/mytest:$tag docker push 178.119.30.133:80/repo/mytest:$tag编写部署脚本 部署项目需要通过Pub…

Everything-一切尽在掌握之中

软件推荐,电脑文件繁多的时候,想要快速找到文件,少不了它 反应速度简直了,一秒响应 官网下载连接:下载 - voidtools

three.js设置模型边界线

three.js设置模型边界线 图例 步骤 拿到模型(如果是外部模型需要遍历),设置透明度根据模型的几何体创建EdgesGeometry几何体创建线条材质创建LineSegments线模型模型加入线模型 代码 const m model.scene.getObjectByName("仓库&qu…

广州市工信局、天河区商务金融局及广州专精特新促进会走访思迈特

2024年1月11日下午,广州市工信局、天河区商务金融局及广州专精特新促进会相关负责人莅临广州思迈特软件总部调研指导,思迈特软件总裁兼COO姚诗成代表公司热情接待,并陪同调研。 调研组实地参观了思迈特软件,深入了解了思迈特发展历…

flutter使用get依赖实现全局loading效果,弹窗loading状态

get dialog的官网文档:GetDialogRoute class - dialog_route library - Dart API 可以使用Get.dialog()方法来创建一个自定义的加载弹窗,get框架是支持自定义弹窗效果的,所以我们就使用这个方式来自定义一个弹窗效果,并且点击遮罩…

集合(二)Collection集合Set

一、Set介绍: 是一个散列的集合,数据会按照散列值存储的,如两个hello的散列值相同,会存储在同一个地址中,所以看到的就是只有一个hello在集合中了。 1、Set集合有两个主要的实现子类:Hashset和Treeset。ha…

【java八股文】之Spring系列篇

【java八股文】之JVM基础篇-CSDN博客 【java八股文】之MYSQL基础篇-CSDN博客 【java八股文】之Redis基础篇-CSDN博客 【java八股文】之Spring系列篇-CSDN博客 【java八股文】之分布式系列篇-CSDN博客 【java八股文】之多线程篇-CSDN博客 【java八股文】之JVM基础篇-CSDN博…

CLion中想要在一个项目中有多个C源文件(有多个main函数)

我们知道,一个项目中只能有一个main()函数,但是我们不想分开创建这么多个C源文件,我们想要在一个工程中允许存在多个main方法了,而且可以独立运行,那么只需要以下步骤即可: 1)在 File - Settin…

利用CHAT写实验结论

问CHAT:通过观察放置在玻璃表面上的单个水滴,人们可以观察到水滴充当成像系统。探究这样一个透镜的放大倍数和分辨率。 CHAT回复:实验报告标题:利用玻璃表面的单一水滴观察成像系统的放大倍数和分辨率: 一、 实验目的…

TEMU、亚马逊、shein平台崛起迅猛,掌握自养号测评必备运营攻略

2023年12月,SimilarWeb发布的数据显示,TEMU的独立访客数量达到4.67亿,与Aliexpress持平,全球排名第二。亚马逊以26.59亿用户位居第一,而SHEIN则拥有1.723亿用户,排名第三。 然而,仅仅六个月前的…

vue 渲染数组,拖拽排序,渲染同一个数组拖拽排序不影响其他选中行状态

当我们能够设置单行状态改变的时候,那么肯定可以拿到选中的当前行的id或者下标index。 只要设定一个初始化值在拖拽开始的时候重新赋值,然后再处理选中状态的时候进行判断即可。 前期写的时候没有注意到这个问题,可以看这个文章。 在复测的时…

【CSCV】划分数据集

参考论文IEEE Xplore Full-Text PDF: 划分数据集时多了一个development set,如下图 先占个坑,看完论文再来填坑

吉祥物如何解锁虚拟主持人身份,赋能品牌营销?

在互联网突破时空的整体语境下,一个吉祥物可以解锁虚拟主持人身份,结合动作捕捉技术,活跃于品牌线上线下营销活动场景,让吉祥物虚拟主持人凭借其“萌”、的特征,带给用户亲近感,快速拉近品牌与用户的距离&a…

CRM管理系统选择技巧-六大步骤助您选择好用的客户管理系统

毫无疑问,一个好的CRM管理系统是任何成长型企业的必备条件。然而,为您的企业选择合适的CRM系统并不容易。打开搜索引擎,有非常多的结果,怎样在数十万个搜索结果中选择适合您的CRM系统?CRM选型要按照明确自身需求、决定…

CentOS stream 9最小化安装说明

Server with GUI:An integrated , easy-to-manage server with a graphical interface. 带有图形用户界面的服务器:集成、易于管理的服务器,带有图形界面。Server:An integrated , easy-to-manage server. 服务器:集成…

计算机毕业设计-----SSH在线电影售票选座版网站平台系统

项目介绍 本项目为前后台项目,首先分为管理员和普通用户,游客。 游客可以进入首页,必须注册成为普通用户才能进行影片的购买。管理员和普通用户进行分权限登录,登录后进入不同页面。 普通用户登录后进入首页,首页有影…

大数据Doris(五十五):SQL函数之日期函数(三)

文章目录 SQL函数之日期函数(三) 一、SECOND(DATETIME date)