当前位置: 首页 > news >正文

uni-app如何实现高性能

这篇文章主要讲解uni-app如何实现高性能的问题?

什么是uni-app?

简单说一下什么是uni-app,uni-app是继承自vue.js,对vue做了轻度定制,并且实现了完整的组件化开发,并且支持多端发布的一种架构,开发的项目可适配多平台。

过内前端开发的大致分歧 

国内前端开发生态现在的两个分歧,分割线上方的主要是以vue为核心实现的,下面的是以react实现的。从下面的生态图也可以看出,在国内vue的生态是比较大的。

 uni-app实现高性能的基本思路

拿小程序进行举例:

在uni-app中我们可能只有一个界面,其中包含<template>、<script>、<style>这三部分的,而在小程序中包含.js、.json、.wxml、.wxss这四个文件。

 在开发的时候可能是单文件的形式,如果发行到小程序的时候还是转化成四个文件,这个过程就需要一个转化。转化的过程就是编译器需要干的工作,通用的方式就是进行拆分,拆分文件。

那么如何进行转化呢?

简单的来说文件转化:如果文件比较简单,可能将<template>转化成.wxss文件、<script>转化为.js、<style>转化为.wxss文件。如果文件比较复杂的化,文件转化后的可读性就会降低。

 编译完之后就是运行,那么在运行时是又会有什么问题呢?

小程序和vue都有相应的生命周期、事件函数和数据绑定,那么在运行的时候该以哪个为主呢?

 这就相当于两个不同地域的人见面进行交流,他们只懂各自的语言,那么怎么才能进行交流呢,常见的方法就是找个翻译,他同时懂两方的语言,由他来做中间的桥梁,实现两方的沟通。这个时候uni-app runtime就应用而生,来实现此部分的工作。上面的架构就变成的这样:

 数据的流向和事件的流向:

数据是由vue进行管理,数据有更改的时候由vue通知uni-app runtime,再有uni-app runtime进行转发给小程序,由此实现数据的流向;事件函数的管理正好相反,当用户触发小程序的事件,由小程序通知给uni-app runtime,再由uni-app runtime转发给vue,vue在收到事件通知后实现事件的响应函数。

 生命周期是由小程序到vue,由vue进行管理

性能优化 

常见的性能优化包含两方面内容:启动加载性能(页面启动的时候比较慢)、页面渲染性能(页面滑动的时候响应慢)。

 众所周知vue开发的程序,是通过dom树进行渲染,当dom树中的数据进行更改的时候,vue会利用自身的算法实现最小的更改对界面进行重新渲染;而小程序的的dom和vue的dom是关联不起来,因此实现的思路变成了下面这种样式:

结合生命周期就变成了这样 ,因此在小程序开发中不会vue dom

vue优化

 由于上面讲过小程序的开发是要重新编译文件的,因此在编译过程中会在panse、optimze中只需标注静态节点,这部分在重新渲染时是不用在进行渲染的;vue的生成实在render中,因此在执行的时候是要修改render的,这部分是针对vue的页面,因此在小程序的开发中这部分是被删除掉的。patch是用于变例vue中的节点,如果由变更就会通知前端进行重新渲染,没有则不必。小程序只针对data因此,只需要将data传递给小程序即可。

小程序的数据大体流向

实际数据流向 

因此从小程序的数据流向可以看出,在小程序中的数据更新就是调用setdata,如何 才能进行优化呢?

1.减少setdata的调用频次;

2.减少setdata在调用是的数据量。

具体方法:

 

 上图左边是在小程序中进行了,需要四次通讯,而在vue中我们可以通过一次进行实现,大大减少通讯的消耗;有人会立即指出神经病才会向左边这样写代码,那么我们换个思路,如果是四个变量呢?是不是在小程序中需要四次。这个也是可以优化的。

 setdata数据量如何减少呢?

下面这个例子中页面用到了a、b两个数据,但在执行方法的时候有a、b、c和d四个参数,在小程序的开发中肯定会传输四次;而实际中我们利用vue只需要传递a一个值就行了,因为只有a一个值改变了。

常见的页面刷新:左边是微信的小程序的写法,右边是vue的写法;如果页面默认加载50条数据,在第一次下拉更新时,微信小程序需要传输100条数据,而在vue中只需要传输50条数据,数据量明显减少;

在第二次下拉更新时,微信小程序需要传输150条数据,而在vue中只需要传输50条数据,数据量明显减少;

在第三次下拉更新时,微信小程序需要传输200条数据,而在vue中只需要传输50条数据,数据量明显减少;

在第四次下拉更新时,微信小程序需要传输250条数据,而在vue中只需要传输50条数据,数据量明显减少;

在第五次下拉更新时,微信小程序需要传输300条数据,而在vue中只需要传输50条数据,数据量明显减少;

在第六次下拉更新时,微信小程序需要传输350条数据,而在vue中只需要传输50条数据,数据量明显减少;

总结:减少setdata传输量的方式 就是在vue的patch中删除vnode,仅使用diff data,借鉴westore Json Diff库实现高效、精确的差量数据。

 性能渲染优化

uni-app实现了全套的vue组件的自主开发

 微信小程序滚动优化

首先看一下微信小程序滚动刷新会带来的后果就是频繁刷新,增加数据的传输

增加滚动边界,在不触发滚动条件的时候不传输数据 

 uni-app测试效果

加载性能

uni-app开发的好处: 

跨端的好处 

 平台能力

 生态:

 uni-app的平台架构

码字不易,如果您觉的我的文章对您有帮助的话,建议您在经济能力之内慷慨打赏一元给我买瓶水, 这将是我下一步继续书写本题目的动力;如果您囊肿羞涩也没有关系,希望您点个关注,写点评论;您的支持将是我创作之路上的无线动力;青山依旧绿水长流,希望我们下期来能再见。 

相关文章:

uni-app如何实现高性能

这篇文章主要讲解uni-app如何实现高性能的问题&#xff1f; 什么是uni-app&#xff1f; 简单说一下什么是uni-app&#xff0c;uni-app是继承自vue.js&#xff0c;对vue做了轻度定制&#xff0c;并且实现了完整的组件化开发&#xff0c;并且支持多端发布的一种架构&#xff0c…...

docker 应用部署

参考:docker 构建nginx服务 环境 Redhat 9 步骤&#xff1a; 1、docker部署MySQL 安装yum 工具包 [rootadmin ~]# yum -y install yum-utils.noarch 正在更新 Subscription Management 软件仓库。 无法读取客户身份本系统尚未在权利服务器中注册。可使用 subscription-…...

java.awt.FontFormatException: java.nio.BufferUnderflowException

Font awardFont Font.createFont(Font.TRUETYPE_FONT, awardFontFile).deriveFont(120f).deriveFont(Font.BOLD);使用如上语句创建字体时出现问题。java.awt.FontFormatException: java.nio.BufferUnderflowException异常表明在处理字体数据时出现了缓冲区下溢&#xff08;Buf…...

C++ 枚举类型 ← 关键字 enum

【知识点&#xff1a;枚举类型】● 枚举类型&#xff08;enumeration&#xff09;是 C 中的一种派生数据类型&#xff0c;它是由用户定义的若干枚举常量的集合。 ● 枚举元素作为常量&#xff0c;它们是有值的。C 编译时&#xff0c;依序对枚举元素赋整型值 0,1,2,3,…。 下面代…...

MySQL故障排查与优化

一、MySQL故障排查 1.1 故障现象与解决方法 1.1.1 故障1 1.1.2 故障2 1.1.3 故障3 1.1.4 故障4 1.1.5 故障5 1.1.6 故障6 1.1.7 故障7​ 1.1.8 故障8 1.1.9 MySQL 主从故障排查 二、MySQL优化 2.1 硬件方面 2.2 查询优化 一、MySQL故障排查 1.1 故障现象与解决方…...

如何做一个知识博主? 善用互联网检索

Google 使用引号: 使用双引号将要搜索的短语括起来,以便搜索结果中只包含该短语。例如,搜索 "人工智能" 将只返回包含该短语的页面。 排除词汇: 在搜索中使用减号 "-" 可以排除特定词汇。例如,搜索 "苹果 -手机" 将返回关于苹果公司的结果,但…...

《QT实用小工具·十》本地存储空间大小控件

1、概述 源码放在文章末尾 本地存储空间大小控件&#xff0c;反应电脑存储情况&#xff1a; 可自动加载本地存储设备的总容量/已用容量。进度条显示已用容量。支持所有操作系统。增加U盘或者SD卡到达信号。 下面是demo演示&#xff1a; 项目部分代码如下&#xff1a; #if…...

作为一个初学者该如何学习kali linux?

首先你要明白你学KALI的目的是什么&#xff0c;其次你要了解什么是kali&#xff0c;其实你并不是想要学会kali你只是想当一个hacker kali是什么&#xff1a; 只是一个集成了多种渗透工具的linux操作系统而已&#xff0c;抛开这些工具&#xff0c;他跟常规的linux没有太大区别。…...

多线程学习-线程池

目录 1.线程池的作用 2.线程池的实现 3.自定义创建线程池 1.线程池的作用 当我们使用Thread的实现类来创建线程并调用start运行线程时&#xff0c;这个线程只会使用一次并且执行的任务是固定的&#xff0c;等run方法中的代码执行完之后这个线程就会变成垃圾等待被回收掉。如…...

Linux第4课 Linux的基本操作

文章目录 Linux第4课 Linux的基本操作一、图形界面介绍二、终端界面介绍 Linux第4课 Linux的基本操作 一、图形界面介绍 本节以Ubuntu系统的GUI为例进行说明&#xff0c;Linux其他版本可自行网搜。 图形系统进入后&#xff0c;左侧黄框内为菜单栏&#xff0c;右侧为桌面&…...

堆排序解读

在算法世界中&#xff0c;排序算法一直是一个热门话题。推排序&#xff08;Heap Sort&#xff09;作为一种基于堆这种数据结构的有效排序方法&#xff0c;因其时间复杂度稳定且空间复杂度低而备受青睐。本文将深入探讨推排序的原理、实现方式&#xff0c;以及它在实际应用中的价…...

docker + miniconda + python 环境安装与迁移(详细版)

本文主要列出从安装dockerpython环境到迁移环境的整体步骤。windows与linux之间进行测试。 简化版可以参考&#xff1a;docker miniconda python 环境安装与迁移&#xff08;简化版&#xff09;-CSDN博客 目录 一、docker 安装和测试 二、docker中拉取miniconda&#xff…...

蓝桥杯刷题第八天(dp专题)

这道题有点像小学奥数题&#xff0c;解题的关键主要是&#xff1a; 有2种走法固走到第i级阶梯&#xff0c;可以通过计算走到第i-1级和第i-2级的走法和&#xff0c;可以初始化走到第1级楼梯和走到第2级楼梯。分别为f[1]1;f[2]1(11)1(2)2.然后就可以循环遍历到后面的状态。 f[i…...

【WEEK6】 【DAY1】DQL查询数据-第一部分【中文版】

2024.4.1 Monday 目录 4.DQL查询数据&#xff08;重点&#xff01;&#xff09;4.1.Data Query Language查询数据语言4.2.SELECT4.2.1.语法4.2.2.实践4.2.2.1.查询字段 SELECT 字段/* FROM 表查询全部的某某查询指定字段 4.2.2.2.给查询结果或者查询的这个表起别名&#xff08…...

Linux:权限篇

文章目录 前言1.用户2.文件的权限管理2.1 修改文件的权限2.2 修改文件的拥有者2.3 修改文件的所属组 3.file指令4.umask指令4.目录的权限管理总结 前言 Linux权限在两个地方有所体现&#xff0c;一种是使用用户&#xff1a;分为root超级用户员与普通用户。另一个是体现在文件的…...

Lua热更新(xlua)

发现错误时检查是否:冒号调用 只需要导入asset文件夹下的Plugins和Xlua这两个文件即可,别的不用导入 生成代码 和清空代码 C#调用lua using Xlua; 需要引入命名空间 解析器里面执行lua语法 lua解析器 LuaEnv 单引号是为了避免引号冲突 第二个参数是报错时显示什么提示…...

并查集(基础+带权以及可撤销并查集后期更新)

并查集 并查集是一种图形数据结构&#xff0c;用于存储图中结点的连通关系。 每个结点有一个父亲&#xff0c;可以理解为“一只伸出去的手”&#xff0c;会指向另一个点&#xff0c;初始时指向自己。一个点的根节点是该点的父亲的父亲的..的父亲&#xff0c;直到某个点的父亲…...

基于 Java 的数据结构和算法 (不定期更新)

JavaIsBestLang 数据结构 Collection 是 Java 中的接口&#xff0c;被多个泛型容器接口所实现。在这里&#xff0c;Collection 是指代存放对象类型的数据结构。 ArrayList 函数名功能size()返回 this 的长度add(Integer val)在 this 尾部插入一个元素add(int idx, Integer …...

考研回忆录【二本->211】

备考时长差不多快一年半&#xff0c;从22年的11月底开始陆陆续续地准备考研&#xff0c;因为开始的早所以整个备考过程显得压力不是很大&#xff0c;中途还去一些地方旅游&#xff0c;我不喜欢把自己绷得太紧。虽然考的不是很好&#xff0c;考完我甚至都没准备复试&#xff0c;…...

【XCPC笔记】2023 (ICPC) Jiangxi Provincial Contest——ABCIJKL 做题记录

补题 赛后gym练习及补题&#xff0c;gym链接&#xff1a;2023 (ICPC) Jiangxi Provincial Contest – Official Contest 另外&#xff0c;D题我也打算找机会学习写下&#xff0c;C题的博弈论还需要好好理解&#xff0c;感觉都是比较有趣的数学问题 补题顺序如下 补题L [Zhang …...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

uniapp手机号一键登录保姆级教程(包含前端和后端)

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...