Flutter 渲染原理和动态化探索

今天参与了满帮的一个大前端的一个技术沙龙,并结合掌握的相关知识做一些总结探索,相关截图可能不是特别清楚

1.Flutter跨平台的优势和不足

image.png
  1. Flutter跨平台是直接面向渲染引擎的,比RN少了一些中转层,性能方面更加出色
  2. Flutter通过渲染引擎直接渲染,所以多端UI更加一致
  3. Flutter本身不支持动态下发

2. Flutter动态化实现方案

image.png
  • 通过编译产物下发,这个是我们正常理解的动态化或者热更新,由于苹果政策原因,暂时不可行
  • 配置json和dart模板匹配或者部分逻辑交给js处理
  • 通过定义一套新的类似于React的声明形式语法来定义UI,再解析转换为json,再由dart解析,形成Flutter三颗树中的第一个widget tree,这也是满帮实现的方式(Thresh,感兴趣的可以到github看看)

3. Thresh实现原理

image.png
image.png
image.png
image.png
image.png
  • Flutter三颗树具体细节可以看我底部的参考资料,这里我自己简单粗略白话说下
    还记得我们app的main函数的runApp吗?它接收一个Widget,所有的页面其实都不过是一个大的Widget,她好比一个大配置文件,做过React开发的同学都知道虚拟DOM和真实DOM,不错,这个大配置文件相当于虚拟DOM,这就是widget tree
    widget tree生成的同时,相应会有一个真实的DOM,这就是ElementTree,差异化更更新就是在这里
    每个Widget最终会有个RenderObject 它也会产生树,布局产生图像数据,最后光栅化,显示在屏幕上

  • 满帮的方案其实是用一个动态化文件如json,构建widget tree,也就是具有层级嵌套关系的多个widget 组合,这里和正常编写widget tree有所不同,在性能指标方面存在进一步验证的空间,比较我们正常的widget tree的编译产品要更加直接,目前我也不确定,需要实验对比...

4. 其他

  • 标准化组件可以加快开发节奏,例如日历控件应该就一种(不完全排除差异化)
  • 动态化发布意思就是动态下发一些如RN的Bundle,或者json文件,实现模块化更新,而不需要重新发版本
  • 在框架之上再附加一层实现动态化应该谨慎使用,除非动态化很重要
  • Flutter Web我想有可能可以用来Flutter 动态化能力不足的问题,后续再专门考虑吧

参考资料:
1.Flutter原理:三棵重要的树(渲染过程、布局约束、应用视图的构建等)

2.Flutter 中文网 架构总览

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容