Flutter是Google打造的高性能、跨平台的UI框架,不仅支持Android、iOS,还支持Windows、Linux等操作系统。它可以给开发者提供简单、高效的方式来构建和部署跨平台、高性能移动应用;给用户提供漂亮、无平台区分的app体验。
图形库skia是其跨平台的基石,本文会对其渲染原理做剖析,带大家了解flutter平台的渲染机制。本文不会对跨端框架做对比,也不会涉及绘制的三棵树,流水线机制等知识(后续会单独介绍),还有一点最新的flutter2也对web支持进行了提速,其中web render中的html渲染方式底层并没有用skia库。
Flutter架构概览
首先我们来了解下Flutter的整体架构设计,Flutter被设计成一个可扩展,分层的系统。它包含了一系列依赖其下层的独立库。
- 框架(Framework):框架层是纯dart语言实现的一个响应式框架,开发者平常需要通过该层和Flutter系统交互。
- 引擎(Engine):引擎层绝大部分是用C++实现的,其为Flutter系统的核心。引擎提供了一系列Flutter核心API的底层实现,图形库,文字布局,文件等,是连接框架和系统(Andoird/iOS)的桥梁。
- 嵌入层(Embedder):嵌入层基本是由平台对应的语言实现的,例如:在Android上是由Java和C++实现;在iOS是由Objective-C/Objective-C++实现。嵌入层为Flutter系统提供了一个入口,Flutter系统通过该入口访问底层系统提供的服务,例如输入法,绘制surface等。
移动端渲染
为了方便更清晰的知道skia图形库在整个渲染过程所处的位置和作用,我大概将移动端的整体UI框架大致分成下面4个层次
1.UI库
无论Android还是ios都有自己的一套UI库(View/UIView),而Flutter则用dart语言实现一整套UI控件。Flutter先将控件树转成渲染树,然后交由skia库绘制界面。
2.图形库
Skia图形库跟iOS平台的CoreAnimation等库功能类似,不仅提供了图形渲染功能,还提供文字绘制和图片显示功能。高级图形图像库将需要绘制的图形转成点、线、三角形等图元,再调用底层图形接口实现绘制。skia本身也依赖了字体库,图片解析库等三方库
3.低级图形接口
OpenGL是使用最广的低级图形接口,兼容性最好,基本上支持市面上的所有GPU。Vulkan是
Khronos Group推出的跨平台图形API(google近些年也在各业务线大力支持),除了iPhone的GPU,其他厂家的GPU基本都支持,旨在替代opengl,提供更细粒度的gpu控制。Metal是苹果推出的图形API,只支持自家GPU。
4.硬件层
目前的移动设备出于性能考虑,大部分图形都是通过GPU渲染,少数情况也会使用CPU渲染。
iPhone 在A11芯片以前使用power vr系列GPU,之后采用自研GPU。安卓手机大部分采用高通Adreno GPU或ARM mail GPU。GPU渲染完一帧图像后送FrameBuffer,最后在合适的时机展示在屏幕上。
Skia应用广泛并且跨平台,不仅用于Flutter和Android操作系统,还用于Google Chrome浏览器,同时支持windows、Mac、iOS操作系统。Skia由C++编写,代码开源,通过研究skia有助于理解图形图像的绘制原理,为UI性能优化提供思路。
skia框架探究
外部依赖
Skia依赖的三方库众多,包