当前位置: 首页 > 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 …...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...