Flutter的绘制剖析——图形库skia

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依赖的三方库众多，包