uni-app如何实现高性能

news2025/1/18 3:21:20

这篇文章主要讲解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传递给小程序即可。