Compose的UI刷新机制是啥?和Flutter一样么?
2023-09-08 05:57:37
从两年前Compose进入alpha版本到今年2月才算稳定的迭代发布,Compose在UI刷新机制上主要优化了底层VirtualDOM,引入了阴暗更新、延迟更新、局部更新、过渡更新等多项优化措施。在遵循React的原则基础上,进一步细化了其渲染的概念。现在,Compose对于组件和布局的优化已经非常出色,同时保留了Reactive声明式UI这一最底层的能力,还可以方便地衔接多平台。
侧重重绘,轻量化:
Flutter在UI刷新机制方面,最主要的思路是利用现代编译器和虚拟机技术直接生成重构优化代码,并将这些优化代码以二进制形式保存下来。这样在执行的时候就可以减少不必要的重复工作了。从技术原理来看,Flutter的虚拟机更注重JIT机制的执行,能够在实践中真正把延迟时间控制在16毫秒以下,进而完成了UI流畅度和性能的提升。
1. 重绘:
Compose: 新的UI在绘制时会覆盖旧的UI,进而生成新的覆盖性UI。如果被覆盖的UI并不大,那么大部分覆盖性UI都能够比较流畅地生成出来。
Flutter: 和Compose一样,Flutter采用了和React相同的VirtualDOM技术,借用了React的diff算法,这一算法主要针对子树的细小改动,可以非常智能地通过新旧元素的映射判断出哪些UI元素发生了变化。通过虚拟化,开发者可以大幅减少渲染次数,进而提升了UI刷新性能。
2. 重构:
Compose: 为了优化UI的交互体验,Compose提供了一系列的优先生成模式,其中延迟更新的模式下,UI并不需要在每一个交互完成后马上更新,而是在批量的交互完成后再更新。Compose的这种设计使得批量的小改动可以一次性在渲染树上完成,批量的UI变化最终被压缩成一次UI更新,进而显著降低了UI的重新构建开销。
在实践中,如果用户的操作是顺序执行的,并且中间没有新一轮的交互之前,这种优化方式可以带来非常显著的性能提升。
Flutter: 在重构方面,Flutter的思路是跳过不必要和重复的UI构建步骤,从而减少整个过程的开销。
这种方式的优点是不管新旧的UI如何不同,Flutter都能够利用JIT技术将整个UI渲染过程编译成可执行的二进制文件,执行效率非常高。优化结果就是UI在刷新时不会发生重绘和重构,而是直接覆盖新的UI。
总结
从以上总结可知,Compose和Flutter虽然在UI刷新机制方面有一些相似点,例如它们都通过React式虚拟DOM和ShadowDOM生成新的UI树,但它们在优化上还是有所区别。
因此,在实践中使用Flutter还是Compose应取决于项目的类型和UI刷新方案的优化重点。