Cube 技术解读 | Cube 渲染设计的前世今生

最新推荐文章于 2024-08-20 09:25:44 发布

阿里巴巴终端技术

最新推荐文章于 2024-08-20 09:25:44 发布

阅读量905

点赞数

文章标签： react native 渲染跨端 android ios

本文链接：https://blog.csdn.net/qq_32198115/article/details/125222297

版权

本文探讨了Cube渲染设计的历史和演进，从解决原生渲染效率问题出发，提出跨平台异步渲染方案。文章详细阐述了Android和iOS平台的技术选型，如Bitmap渲染和TextureView等，并介绍了渲染技术的三次迭代，优化了渲染效率和跨平台一致性。当前面临的问题包括两端一致性、闪白现象，未来规划包括渲染快照、预渲染等策略的优化。

摘要由CSDN通过智能技术生成

作者：何瑾(潇珺)

本文为《Cube 技术解读》系列第四篇文章，往期文章欢迎大家回顾。

《Cube 技术解读 | Cube 小程序技术详解》

《Cube 技术解读 | 支付宝新一代动态化技术架构与选型综述》

《Cube 技术解读 | Cube 卡片技术栈详解》

阿里是个重运营的公司，前端开发者居多，2016-2017年，在Weex还是1.0时代，React Native开源还没多久，Flutter还没诞生的时候，如何在贴合前端开发环境的前提下，快速铺到android/iOS双平台是个大热点，支付宝内部孵化一个动态化跨平台方案顺势而生。

前面三篇文章分别介绍了Cube当前架构，Cube卡片和Cube小程序技术产品形态。这篇文章主要讨论Cube的渲染设计，帮助大家了解Cube卡片渲染技术的前世今生。

Native原生渲染的问题

我们都知道一个原生view渲染上屏需要几个步骤，以android举例：create、measure、layout、draw，这些需要在主线程完成，当实现原生列表时，即使完美复用item，对不同数据渲染时，也需要measure、layout、draw几步缺一不可，而且随着view嵌套层级越深，对主线程资源消耗越大，当列表fly起来以后，帧率快速下降，造成页面卡顿，基于这个问题，cube在调研期间，如何解决渲染效率是重要的一part。

通常来说优化列表滚动帧率，也就是view层级、布局复杂度、去掉不必要背景色，解决过度绘制，图片懒加载、item复用等方面下手，但根本还是绕不过measure、layout、draw。彼时的weex和RN，也都还是将html中的标签映射到平台层view，在某些场景下，开发者又不能像原生开发一样自行优化，在渲染性能上饱受诟病。因此cube调研期间渲染目标是：优化渲染效率+跨平台。