04-大前端底层原理|纯Native、WebApp与类RN技术方案、移动跨平台开发三种不同技术方案下的页面渲染的性能比较

前言

我们前期在探索iOS动画及渲染相关原理的时候,先后了解了:

计算机图形渲染原理；

移动终端屏幕成像与卡顿原理；

iOS的各个渲染框架以及iOS图层渲染原理；

我们作为一个程序员,在提升技术能力水平的时候,有几种学习方法,比如,链式学习法、环式学习法、比较学习法等。

很明显,我们在探索iOS动画及渲染相关原理的时候用的就是链式学习法。

紧接着,为了拓宽自己的知识面,对相同课题的做一个相对系统的认识,我们将采用环式学习法,去探索相关的几个课题:

iOS-OffScreenRendering离屏渲染原理

iOS因CPU、GPU资源消耗导致卡顿的原因和解决方案

以上皆是以iOS Native开发的角度去关注的,换一个维度去考虑的话,我们当然少不了应当去关注WebApp、跨平台开发的技术方案，你猜的没错,我在这里用的是比较学习法，相关的课题:

Web和类RN大前端的渲染原理

Flutter页面渲染原理

三种不同技术方案下的页面渲染的性能比较 经过前面的努力,我们输出了几篇文章(如上),我们终于来到了阶段性总结的时候！！！本篇文章就是为了讨论:纯Native、WebApp与类RN技术方案、移动跨平台开发方案Flutter三种不同技术方案下的页面渲染的性能比较 那就让我们开始吧！

一、简单回顾

我们在这篇文章:Web和类RN大前端的渲染原理曾探讨论过Web和以JSCore作虚拟机的类RN大前端技术方案的页面渲染原理,我们得到的结论是: WebView < 类ReactNative < 原生。（因为json的复杂度比html+css低）
我们在这篇文章:Flutter页面渲染原理曾探讨论过以Flutter为代表的移动跨平台技术方案，我们得到的结论是:

Flutter 界面是由 Widget 组成的，它的渲染流程可以分为两个阶段：

在 Framework 层:

Flutter 渲染在 Framework 层会有 Build、Wiget Tree、Element Tree、RenderObject Tree、Layout、Paint、Composited Layer 等几个阶段

在 GPU 层:

将 Layer 进行组合，生成纹理

使用 OpenGL 的接口向 GPU 提交渲染内容进行光栅化与合成，是在 Flutter 的 C++ 层，使用的是 Skia 库

包括提交到 GPU 进程后，合成计算，显示屏幕的过程和 Native基本是类似的，因此性能也差不多。

二、总结

渲染性能比较:原生渲染 ≈ Flutter渲染 > 类RN大前端 > Web

但Flutter的优势在于：
- 跨平台，可以同时运行在 iOS、Android 两个平台。
- 热重载（Hot Reload），省去了重新编译代码的时间，极大的提高了开发效率。
- 以及未来谷歌新系统 “Fuchsia” 的发布与加持。如果谷歌未来的新系统 Fuchsia 能应用到移动端，并且领域替代 Android 。
- 由于Fuchsia的上层是Flutter编写的，因此Flutter开发成为了移动端领域的必选项。同时Flutter又支持跨平台开发，那么其他领域的技术栈存在的价值会越来越低。
当然，苹果的希望在于 SwiftUI。如果 Fuchisa 最终失败了，SwiftUI 也支持跨端了。同时，SwiftUI本身也支持热重载。也许也是一个未来呢。

04-大前端底层原理|纯Native、WebApp与类RN技术方案、移动跨平台开发三种不同技术方案下的页面渲染的性能比较

前言

一、简单回顾

二、总结

相关阅读(共计14篇文章)

iOS相关专题

webApp相关专题

跨平台开发方案相关专题

阶段性总结:Native、WebApp、跨平台开发三种方案性能比较

Android、HarmonyOS页面渲染专题

小程序页面渲染专题

总结