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的平台架构

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Java EE】初识Spring Web MVC

文章目录 &#x1f334;什么是Spring Web MVC&#xff1f;&#x1f338;什么是Servlet呢? &#x1f332;MVC 定义&#x1f338;再理解Spring MVC &#x1f333;如何学习Spring MVC呢&#xff1f;⭕总结 &#x1f334;什么是Spring Web MVC&#xff1f; Spring Web MVC 是基于…

【Linux】使用cloudreve搭建个人网盘并传输文件

Cloudreve 是一个开源的个人网盘系统&#xff0c;能够帮助用户搭建属于自己的私有云存储服务。它支持多种存储后端&#xff0c;包括本地存储、远程FTP/SFTP存储、以及云存储服务如阿里云OSS、腾讯云COS和Amazon S3等。Cloudreve具有友好的用户界面和丰富的功能&#xff0c;比如…

揭秘rmallox病毒:防范、清除、恢复一步到位!

引言&#xff1a; 随着信息技术的快速发展&#xff0c;计算机病毒已成为网络安全领域的一大难题。其中&#xff0c;rmallox病毒是近年来备受关注的一种恶意软件。本文将深入探讨rmallox病毒的特性、传播途径、防范措施、清除方法以及数据恢复技巧&#xff0c;帮助读者全面了解这…

创新指南|涵盖创新管理的一系列终极指南

毫无疑问&#xff0c;创新是过去几十年来最热门的流行语和最具争议的话题之一&#xff0c;尽管很多人已经厌倦了到处听到它&#xff0c;但这个术语和概念它的后面就留在这里。由于这已被证明是无休止的争论来源&#xff0c;因此我们决定创建一系列涵盖创新管理的博客文章&#…

Ideal的使用技巧

一、springcloud项目如何将多个服务放到services中一起启动 1、打开ideal&#xff0c;再view -> Tool Windows -> services 2、在services界面 找到 run configuration type -> springboot即可 二、配置临时的启动参数 1、在edit configurations中 2、选择相应的服务…

红黑树平衡艺术:最大化与最小化红色结点比值的策略与实现

红黑树平衡艺术&#xff1a;最大化与最小化红色结点比值的策略与实现 一、 最大比值的红黑树构造1.1 伪代码示例&#xff1a;1.2 C代码示例&#xff1a; 三、最小比值的红黑树构造3.1 伪代码示例&#xff1a;3.2 C代码示例&#xff1a; 四、结论 红黑树是一种自平衡的二叉搜索树…

动态多目标优化:动态约束多目标优化测试集DCP1-DCP9的TruePF(提供MATLAB代码)

一、进化动态约束多目标优化测试集DCP1-DCP9 参考文献&#xff1a; [1]G. Chen, Y. Guo, Y. Wang, J. Liang, D. Gong and S. Yang, “Evolutionary Dynamic Constrained Multiobjective Optimization: Test Suite and Algorithm,” in IEEE Transactions on Evolutionary Com…

从零开始搭建后端信息管理系统(新手小白比如)

如果你是新手小白&#xff0c;首先我们要进行一些准备工作&#xff0c;安装一些基础软件&#xff0c; 备注一下&#xff1a;这里安装的vue环境的后台管理系统&#xff0c;不同的后台管理系统&#xff0c;需要安装不同的插件 准备工作&#xff1a; 安装 Visual Studio Code …

【Linux】UDP编程{诸多编程接口/三版本服务器/编程常见问题}

文章目录 0.预备知识0.1套接字0.2TCP/UDP0.3大小端问题 1.socket 常见API1.1socket1.2各个接口1.3int bind();1.3网络头文件四件套1.4bzero1.5recvfrom1.6sendto() 2.UDP编程2.1服务器编程2.2客户端编程2.3运行测试2.3.1本机通信2.3.2popen2.3.3strcasestr2.3.4回顾C11智能指针…

Ubuntu20.04配置Kinect 2.0驱动安装和ROS环境下配置以及录制bag包和制作ORB-SLAM数据集

1. 安装libfreenect2 1.1 下载官方文件 git clone https://github.com/OpenKinect/libfreenect2.git cd libfreenect21.2 安装build工具 sudo apt-get install build-essential cmake pkg-config1.3 安装libusb sudo apt-get install libusb-1.0-0-dev1.4 安装urboJPEG su…

如何客观评价5G的现状?

前几天&#xff0c;在知乎上看到一个帖子&#xff0c;热度挺高&#xff1a; 看了一下帖子的回答&#xff0c;基本上都在骂5G。 作为通信行业从业者&#xff0c;我说说我自己的看法。大家姑且听听&#xff0c;一起交流一下。 我们目前所处的这个时代&#xff0c;有一个很大的特点…

练习题(2024/4/6)

1最接近的三数之和 给你一个长度为 n 的整数数组 nums 和 一个目标值 target。请你从 nums 中选出三个整数&#xff0c;使它们的和与 target 最接近。 返回这三个数的和。 假定每组输入只存在恰好一个解。 示例 1&#xff1a; 输入&#xff1a;nums [-1,2,1,-4], target …

【Linux】shell 脚本基础使用

在终端中输入命令可以完成一些常用的操作&#xff0c;但是我们都是一条一条输入命令&#xff0c;比较麻烦&#xff0c;为了解决这个问题&#xff0c;就会涉及到 shell 脚本&#xff0c;它可以将很多条命令放到一个文件里面&#xff0c;然后直接运行这个文件即可。 shell 脚本类…

STM32单片机智能手环心率计步器体温

简介 STM32F103C8T6单片机核心板电路、ADXL345传感器电路、心率传感器电路、温度传感器和lcd1602电路组成。通过重力加速度传感器ADXL345检测人的状态&#xff0c;计算出走路步数、走路距离和平均速度。过心率传感器实时检测心率&#xff0c;通过温度传感器检测温度。通过LCD16…

基于springboot实现教师人事档案管理系统项目【项目源码+论文说明】

基于springboot实现在线商城系统演示 摘要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本ONLY在线商城系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理…

ZYNQ学习之Petalinux 设计流程实战

基本都是摘抄正点原子的文章&#xff1a;<领航者 ZYNQ 之嵌入式Linux 开发指南 V3.2.pdf&#xff0c;因初次学习&#xff0c;仅作学习摘录之用&#xff0c;有不懂之处后续会继续更新~ PetaLinux工具提供了在 Xilinx 处理系统上自定义、构建和部署嵌入式 Linux 解决方案所需的…

单链表学习

//静态链表&#xff0c;只往后看&#xff0c;找前面必须遍历 //算法题用数组解题更快速 //初始化,头节点为空 //将x插入到头节点 //将x插到结点k的后面 //将下标k的后面的点删掉 #include<algorithm> #include<iostream> #include<cstring> #include<queu…

STL —— list

博主首页&#xff1a; 有趣的中国人 专栏首页&#xff1a; C专栏 本篇文章主要讲解 list模拟实现的相关内容 &#xff11;. list简介 列表&#xff08;list&#xff09;是C标准模板库&#xff08;STL&#xff09;中的一个容器&#xff0c;它是一个双向链表数据结构&#xff0c…

嵌入式开发学习---(部分)数据结构(无代码)

数据结构 为什么学习数据结构&#xff1f; 1&#xff09;c语言告诉如何写程序&#xff0c;数据结构是如何简洁高效的写程序 2&#xff09;遇到一个实际问题&#xff0c;需要写程序去实现相应功能&#xff0c;需要解决那两个方面的问题&#xff1f; 如何表达数据之间的逻辑规律…

20240327-PCL-1.41.0安装说明-VS2022-CMAKE篇

20240327-PCL-1.41.0安装说明-VS2022-CMAKE篇 一、软件环境 Win10 x64 22h2 Junecmake 3.29.1VSCODE v1.87.2GIT v2.29.2标签&#xff1a;win10 22h2 vscode cmake分栏&#xff1a;C 二、硬件环境 Win10 x64的PC台式机 三、下载最新版本PCL-1.41.0 方法一 https://githu…