iOS 开发高手课
戴铭
前滴滴出行技术专家
42934 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 47 讲
用户故事 (1讲)
iOS 开发高手课
15
15
1.0x
00:00/00:00
登录|注册

42 | iOS原生、大前端和Flutter分别是怎么渲染的?

测试与混合
片段着色器
光栅化
几何着色器
形状装配
顶点着色器
Chrome 和 WebKit 的渲染引擎的区别
React Native 和其他方案在渲染上的性能都差不多
大前端中的 WebView 方式渲染性能会差些
Flutter 的主要优势
渲染流程
Widget 组成的界面
类 React Native 的性能问题
WebView 的性能问题
类 React Native 的渲染
基于 WebView 的大前端渲染
Render Server 调用 GPU 进行渲染
数据到达 Render Server 后被反序列化
CPU 计算要显示的内容
更新视图树,同步更新图层树
GPU 的可编程能力不断加强
GPU 的工作阶段
GPU 的并行计算能力要求非常高
CPU 和 GPU 共同计算处理界面
课后作业
小结
Flutter 渲染
大前端渲染
原生渲染
渲染原理
参考文章

该思维导图由 AI 生成,仅供参考

你好,我是戴铭。今天,我来和你聊聊 iOS 原生、大前端和 Flutter 分别是怎么渲染的。
用户在使用 App 时,界面的设计、流畅程度是最直接的体验。为此,苹果公司提供了各个层级的库,比如 SwiftUI、UIKit、Core Animation、Core Graphic、OpenGL ,以方便 App 界面的开发。
说起来,即使你不了解这些库的实现原理,也可以通过它们提供的易用接口上手去开发 App,特别是 SwiftUI 大大简化了界面的开发,也确实能够解决大部分问题。但是,一旦遇到性能问题,完全依靠搜索获得的不完整的、拼凑来的知识,大概率只能解一时之需,要想系统地解决问题,还是要知道这些库的实现原理。
而这些与界面相关的库,背后的知识其实就是渲染。接下来,我就和你说说渲染的原理。

渲染原理

我们看到的 App 界面,都是由 CPU 和 GPU 共同计算处理的。
CPU 内部流水线结构拥有并行计算能力,一般用于显示内容的计算。而 GPU 的并行计算能力更强,能够通过计算将图形结果显示在屏幕像素中。内存中的图形数据,经过转换显示到屏幕上的这个过程,就是渲染。而负责执行这个过程的,就是 GPU。
渲染的过程中,GPU 需要处理屏幕上的每一个像素点,并保证这些像素点的更新是流畅的,这就对 GPU 的并行计算能力要求非常高。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文深入探讨了iOS原生、大前端和Flutter三种渲染方式的原理和特点。在iOS原生渲染中,CPU处理渲染内容并传输给GPU进行渲染,而大前端渲染则通过WebView或React Native进行,但由于脚本语言性能问题存在性能差距。相比之下,Flutter使用全新的渲染引擎,通过Widget Tree、Element Tree和RenderObject Tree等阶段实现界面更新,性能与iOS原生渲染相当。文章深入浅出地解释了这三种渲染方式的工作原理和性能特点,为读者提供了全面的技术了解。 总结来看,本文详细介绍了iOS原生、大前端和Flutter三种渲染方式的工作原理和性能特点。在选择开发方案时,建议根据团队情况和工作需要进行综合考量。若团队偏向大前端,可以选择拥抱变化;喜欢谷歌技术的可以选择Flutter;而果粉则可继续iOS原生开发之旅。文章还提出了Chrome和WebKit渲染引擎的区别,并鼓励读者在评论区分享观点,欢迎更多朋友一起阅读。 总的来说,本文内容丰富,深入浅出地介绍了不同渲染方式的原理和特点,对于技术人员和开发者具有很高的参考价值。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《iOS 开发高手课》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(8)

  • 最新
  • 精选
  • 🚲 刘大欢
    斗胆尝试回答一下楼上同学的问题 屏幕开始渲染的时候 cpu会做包括视图创建 布局计算 图层绘制 图像解码等一系列事情 等构件好图层树 渲染层拿到并反序列化后成为渲染树调用openGL操作gpu指令时 其实在序列化完成 这个事务已经完成了 剩下的就是屏幕上绘制这一帧的显示了 你说的改变位置应该是下帧的事情了 不可能在在中间还有穿插一次提交这么一说吧
    2019-12-08
    4
  • Bo
    好像没有人讨论课后作业,暂且放上自己搜索资料后得到的回答: Google起初使用Webkit作为Chrome浏览器的引擎,后来以Webkit引擎为基础创造了Blink引擎,它针对Webkit内核,去掉了几十万行不相关的复杂代码,让效率更高。然后针对未来的网页格式,做了进一步优化,和效率提升的处理。 所以Chrome的Blink内核可以看成是Webkit的精简高效强化版。
    2022-02-21
    2
  • 菜头
    能答疑吗 我想问
    2023-08-14归属地:上海
  • Bo
    Chrome渲染引擎Blink:https://www.chromium.org/blink/
    2022-02-21
  • Geek_54260c
    原生每一帧的渲染不也是通过ipc传递给render server的嘛?core animation 和render server 也是独立进程,为什么这块会比webview快呢?
    2020-09-02
    2
  • Schrödinger
    原生渲染那部分感觉写得有些问题
    2020-07-07
    1
  • Geek_9dbcb4
    flutter是有UI局部刷新的功能,来提高渲染效率。iOS的渲染,没有这方面的优化吧?
    2020-04-27
    1
  • 方金峰
    老师,问一下啊!iOS的图层树经过序列化发送到渲染服务进程,渲染服务进程反序列化得到图层树,然后生成渲染树,这里如果当前只改动了一个图层的位置,app当前进程也会将整颗图层树序列化发送到渲染服务进程?如果是整颗图层树这样设计的好处是什么,因为进程和进程之间的通讯,数据传输是一个制约效率的因素,这里能否请老师帮忙解答下,或是指明下哪里有这方面材料,可以研究下。麻烦了啊!
    2019-07-02
    1
收起评论
显示
设置
留言
8
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部