React Native,Flutter,相比于iOS原生的性能

田权
2023-12-01

一:现在越来越流行跨端夸平台,也就是大前端开发,开发框架一类是React Native的,另一种是基于WebView的。

1:React Native 是Facebook于2015年4月开源的跨平台移动应用开发框架,RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域

2:Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。Flutter组件采用现代响应式框架构建。

二:那么两种开发方式那个性能上会更接近原生呢,那就要从渲染原理出发,关于UI上的开发苹果有很多库作为支撑比如UIKit,OpenGL,CoreAnimation,Core Graphic, SwiftUI。

1:CPU计算数据(比如视图布局)然后交给GPU,GPU也会通过计算然后渲染生成我们想看到的UI,可以通过OpenGL库来操作。总的来说,CPU与GPU的计算能力越快,屏幕显示就会越流畅,反之,如果vsync信号高于16.7ms就会产生卡顿,不流畅。

2:原生渲染,首先CPU计算要显示的内容数据(创建视图,布局,绘制,图像解码转换等),在runloop的BeforeWaiting和Exit状态时会发送通知,对图层处理打包,然后发给一个独立负责渲染的进程Render Server(主要执行OpenGL、Core Graphics 相关的操作,对图层树渲染)处理完数据后再交给GPU(这个过程的布局计算会重载视图LayoutSubViews方法以及addSubView和drawRect方法,如果调用setNeedsDisplay或setNeedsDisplayInRect都会触发页面更新,重新渲染)。

3:React Native从数据上讲要解析JSON+JavaScript,其执行性能要比原生差,而且因为本身脚本语言的执行速度相比原生慢,所依首次加载比较耗时。

4:Flutter界面是Widget组成的,在渲染上会有 Buid,Widget Tree,Element Tree, RenderObject Tree,Layout,Paint,Composited Layer等几个阶段,将Layer进行组合生成纹理,使用OpenGL接口向GPU提交渲染内容进行光栅化与合成,是在Flutter的C++层,使用的是Skia库,包括提交到GPU进程后的合成计算,显示到屏幕的过程和iOS原生基本类似,所以性能上也很接近。

5:SwiftUI是苹果WWDC 2019 推出的UI框架,只支持iOS13及以上版本,跨Apple生态内端。

 类似资料: