关于目前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/67516

		4,rpx			响应式单位。相当于upx的升级版,基准单位750rpx,实测iphone xs max pro全屏宽750,Oppo a5 全屏宽753	(推荐使用)

		5,实战推荐rpx与百分比计算布局一起使用。		
三、混合开发的大方向

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

Boss学习法了解如下:
关于目前uni-app渲染性能以及混合开发的大方向的若干思考_第1张图片
所以目前比较好的app端跨平台框架仍然只有react-native与flutter。flutter潜力巨大,性能够好甚至跨桌面端,有计划会覆盖window maxos linus等平台。所以若是要开发app,flutter仍然是强势的选择。

你可能感兴趣的:(uniapp)