小程序性能优化之页面预加载方案——让你的小程序运行如飞 集成篇

2023-12-21 12:08

本文主要是介绍小程序性能优化之页面预加载方案——让你的小程序运行如飞 集成篇,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

小程序性能优化之页面预加载方案 集成篇

转载请注明出处:https://blog.csdn.net/sinat_27612147/article/details/80802725

前言

之前看到一篇文章,《微信小程序之提高应用速度小技巧》,是讲如何实现小程序在触发页面跳转前就请求协议,利用跳转页面的短短200~300ms的时间,获取到数据并渲染到页面上,实现数据在小程序页面中预加载。这种技术,可以缩短用户的等待时间,极大的提升用户的使用体验。但是那篇文章中只是讲述了技术原理,并没有实际教大家如何编写,那么今天我来具体的讲下这个技术实现方式。

框架优缺点

优点:

  • 预加载下一个页面的数据,提高了页面的加载速度,轻量级的协议(200~300ms左右就能接收到数据)能轻松让小程序页面打开后数据瞬间加载,几乎不出现空页面。
  • 让同种业务的代码保持在一个类中,不会破坏项目结构。
  • 代码量非常少,对原本业务影响非常少。
  • 实现预加载后想删掉预加载?只需在实现的类中删除一个字符串即可。

缺点:

  • 需要你按情况替换setData$setData
  • 需要开发者非常清楚各情况下的上下文是什么。
  • 如果你的协议非常耗时,达到400ms以上的,使用这种优化方式效果就不明显了。
  • 有网友发现,这个项目无法运行在使用了组件的小程序中,所以大家如果使用了组件的话,就不要直接用这个项目 了。不过还是推荐你吸收下这个项目的思想,毕竟工程师在工作中思想是很重要的。

当然,还是先给大家看下具体的效果。

最终效果

这里展示的是一条协议总时间是300ms的加载效果。这里是用setTime()来模拟的。一个是今天要介绍的预加载方式(跳转前就开始请求协议)和普通加载方式(跳转后才开始请求协议),可以看到,普通加载方式,在跳转页面成功后,页面会先空,后有数据;而预加载方式一进到页面就有数据。这里主要是用Android手机来测试的(型号是魅族pro6),点击按钮时是有点击态的,但是颜色太浅,淡蓝色,不容易看出来。这个点击态在预加载方案中的地位是非常重要的!!

  • 预加

这篇关于小程序性能优化之页面预加载方案——让你的小程序运行如飞 集成篇的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/519938

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

性能测试介绍

性能测试是一种测试方法,旨在评估系统、应用程序或组件在现实场景中的性能表现和可靠性。它通常用于衡量系统在不同负载条件下的响应时间、吞吐量、资源利用率、稳定性和可扩展性等关键指标。 为什么要进行性能测试 通过性能测试,可以确定系统是否能够满足预期的性能要求,找出性能瓶颈和潜在的问题,并进行优化和调整。 发现性能瓶颈:性能测试可以帮助发现系统的性能瓶颈,即系统在高负载或高并发情况下可能出现的问题

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 ·解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切分为不同地图,在某一侧只使用该侧地图进行定位 方案思路 切分原理:切分地图基于关键帧位置,而非点云。 理论基础:光照是直线的,一帧点云必定只能照射到墙的一侧,无法同时照到两侧实践考虑:关

HDFS—存储优化(纠删码)

纠删码原理 HDFS 默认情况下,一个文件有3个副本,这样提高了数据的可靠性,但也带来了2倍的冗余开销。 Hadoop3.x 引入了纠删码,采用计算的方式,可以节省约50%左右的存储空间。 此种方式节约了空间,但是会增加 cpu 的计算。 纠删码策略是给具体一个路径设置。所有往此路径下存储的文件,都会执行此策略。 默认只开启对 RS-6-3-1024k

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题,本文将一起从代码层去分析为什么没有建立索引? 开源ERP项目地址:https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

高效+灵活,万博智云全球发布AWS无代理跨云容灾方案!

摘要 近日,万博智云推出了基于AWS的无代理跨云容灾解决方案,并与拉丁美洲,中东,亚洲的合作伙伴面向全球开展了联合发布。这一方案以AWS应用环境为基础,将HyperBDR平台的高效、灵活和成本效益优势与无代理功能相结合,为全球企业带来实现了更便捷、经济的数据保护。 一、全球联合发布 9月2日,万博智云CEO Michael Wong在线上平台发布AWS无代理跨云容灾解决方案的阐述视频,介绍了

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟 开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚 第一站:海量资源,应有尽有 走进“智听

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

Android平台播放RTSP流的几种方案探究(VLC VS ExoPlayer VS SmartPlayer)

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候,不知道如何选的好,本文针对常用的方案,做个大概的说明: 1. 使用VLC for Android VLC Media Player(VLC多媒体播放器),最初命名为VideoLAN客户端,是VideoLAN品牌产品,是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式,并支持DVD影音光盘,VCD影