关于目前uni-app渲染性能以及混合开发的大方向的若干思考

笔者接触uniapp已经大半月了，同时百度编程法接触了较多的混合开发框架进行技术选型对比，心理历程是感叹 -> 佩服 -> 释然 -> 平静。

一、uni-app vs taro

首先带微信小程序的框架都是国内的，国外主要玩Instagram、Twitter、Facebook、WhatsAPP，笔者因为工作需要也被迫玩过WhatsAPP。

框架	技术栈	案例	微信小程序	支付宝小程序	百度小程序	头条小程序	H5	App
Taro	React	丰富	⭕	⭕	⭕	⭕	⭕	⭕
娜娜奇	React	少	⭕	⭕️	⭕️	⭕️	⭕️	❌
wepy	Vue	丰富	⭕	❌	❌	❌	❌	❌
mpvue	Vue	丰富	⭕	❌	❌	❌	⭕️	❌
uni-app	Vue	丰富	⭕	⭕️	⭕️	⭕	⭕️	⭕
megalo	Vue	少	⭕	⭕️	⭕️	❌	❌	❌
OKAM	Vue	少	⭕	⭕	⭕	⭕	❌	❌
Mpx	Vue	少	⭕	❌	❌	❌	❌	❌

目前带小程序和app的混合开发框架且比较日气的主要是uni-app与taro。下面是二者更详细的比拼

框架	公司实力	开发软件	语言	学习成本	开发速度	跨平台
Taro	京东(凹凸实验室)	完美支持VSCode	React	中	社区活跃,轮子不多	app向小程序覆盖,更像app
uni-app	DCloud	国产HBuilderX	Vue	中偏低	qq群活跃,轮子多	小程序出身,更像小程序

因此：

1，喜欢vue的、开发更快(轮子多、hot reload)，建议选择uniapp
2，喜欢JSX的组件化的建议选择taro

二、uni-app性能怎么样

Skia图像处理引擎 (Google 的)是基于jpeg图像引擎的二次封装

vdom速度要显著优先于dom

平台	图像处理引擎	渲染方式
Android	Skia	view->layout->renderNode ->合成->GPU渲染
Ios	Quartz、OpenGL	UIKit ->Core Animation OpenGL ES-> Core Graphics
Flutter	Skia	Dark -> Layer Tree -> Compositor -> Skia->GPU渲染
react-native/weex	bridge(基于vdom)	JS Thread -> DOM Thread -> Native Main Thread
webview	dom tree	html->dom tree ->render tree ->render layer + 栅格化 ->合成->gpu渲染。

总结

uni-app支持webview与weex双重渲染，相当于把h5的技术与rn的技术做了一个总结。由于是基于weex的，然后下一层才是bridge。多了一层就多了一份性能问题，而且也不是全部基于weex的。所以性能方面应该会比bridge始祖ReactNative略差一点。

三、uni-app的学习

1，ui-app官网：https://uniapp.dcloud.io/frame?id=%e5%bc%80%e5%8f%91%e8%a7%84%e8%8c%83
2，aro vs uni-app选型对比经历（https://blog.csdn.net/wave_1102/article/details/90323578）
3,【链接】正在读取MRO审批：https://org.modao.cc/app/7icqhnlz7qw5nz9qhxc47qfbx879jw8m?simulator_type=device&sticky#screen=sk7boyvx03yb6iy
4,【链接】正在读取培训考试：https://org.modao.cc/app/b50a136c5300813bd75062aac1236d28c571d1d8?simulator_type=device&sticky
5,uni-ui框架github地址：https://github.com/dcloudio/uni-ui
6,less sass区别：https://www.cnblogs.com/moumoon/p/11020363.html
7,vue nvue区别：https://ask.dcloud.net.cn/question/69854
8,uniapp优点：
1，hot reload快速开发
2，高端时尚的vue语法（vue与React区别：http://caibaojian.com/vue-vs-react.html）
3，官方声称的一系列优点（https://uniapp.dcloud.io/README）
4，uni-app是DCloud出品的，属于国产
9,uniapp缺点：
1，较差的编译器（HBuilderX长时间编译不稳定，没法儿点击链接，当前文件没法儿看到文件目录定位）
2，较多的注意事项（开发目录结构定义太死，命名规范定义太死等，https://uniapp.dcloud.io/matter）
3，言过其实的优点（https://uniapp.dcloud.io/history）
4，uni-app问世的时间还比较短，有很多地方还不是完善，坑很多,技术问题需要付费，且框架层问题没法儿自定义
10,Vue.config.productionTip = true
开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。此外，有些警告检查还有一些小的运行时开销，这在生产环境模式下是可以避免的。(摘于官网说明) 大概意思应该就是，消息提示的环境配置，设置为开发环境或者生产环境
11,App.mpType = ‘app’
系统必须配置参数，未知作用，参考https://ask.dcloud.net.cn/question/82090
12,app.$mount()
$mount()手动挂载,Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；
参考https://www.cnblogs.com/tongbiao/p/9307580.html
13,“新闻uniapp”框架问题
1,使用var，建议使用let（https://www.jianshu.com/p/3ab0781d76bb）
2，而且这里isIos最好封装成全局的呀（https://blog.csdn.net/Mrchai521/article/details/89348881）
3，也没有统一的规范，8个人写8种规范
4，加入到员工中后，还存在重复资源的问题。每个uniapp都带框架
5，框架残缺（未加入mock数据等）
14，重要目录，参考https://uniapp.dcloud.io/frame?id=%e5%bc%80%e5%8f%91%e8%a7%84%e8%8c%83
┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放本地网页的目录，详见
├─platforms 存放各平台专用页面的目录，详见
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents 存放小程序组件的目录，详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见
├─pages.json 配置页面路由、导航条、选项卡等页面类信息，详见
├─node_modules 三方库缓存
├─locales 多语言“vue-i18n”库的文案存储
├─public H5用,app，小程序是不需要的,参考https://www.cnblogs.com/gaogch/p/10628613.html
└─unpackage 生成 H5 的相关资源文件，保存于 unpackage 目录
16，制图单位
1,不写单位: 出现控件不展示情况
(禁止使用)
2,px: 像素单位.手机宽度上高分辨率手机远远大于低分辨率 (慎重使用)

     3,upx:          响应式单位。约等于百分比布局,基准单位750upx。实测iphone xs max pro全屏宽750，Oppo a5 全屏宽753   (有更好的替代)缺点是不支持动态绑定且会产生“uni.upx2px() 最终生成的px都只能是整数”的问题参考 https://ask.dcloud.net.cn/question/675164,rpx           响应式单位。相当于upx的升级版,基准单位750rpx，实测iphone xs max pro全屏宽750，Oppo a5 全屏宽753  (推荐使用)5,实战推荐rpx与百分比计算布局一起使用。

三、混合开发的大方向

劳动决定价值，价格围绕着买卖市场上下波动。
uni-app由于技术门槛比较低，交互与性能的精细定制化很难做到，因为价值比较低。主要适合于外包这种快速开发市场

Boss学习法了解如下：

所以目前比较好的app端跨平台框架仍然只有react-native与flutter。flutter潜力巨大，性能够好甚至跨桌面端，有计划会覆盖window maxos linus等平台。所以若是要开发app，flutter仍然是强势的选择。