vivoy67怎么截屏_vivoy67怎样截屏

在移动应用开发的世界里，Flutter技术正在迅速崛起，尤其是在像淘宝特价版这样的高流量应用中。这个应用已经广泛应用了Flutter技术，涵盖了首页、详情页、店铺页、我的页面、短视频、评价和设置等二级页面。虽然Flutter在UI渲染方面表现出色，但其在性能上的挑战也不容忽视。

Flutter作为一个“UI渲染框架”，通过异步操作来实现子线程渲染，并通过Skia图形引擎保持渲染的一致性。尽管其技术方案在许多场景下表现良好，但也会带来性能上的瓶颈。例如，在应用启动时，动态库的加载会导致启动时间延迟，而在页面渲染时，由于主线程和Flutter子线程的配合不够顺畅，可能会导致页面短暂白屏，从而影响用户体验。

面对这些挑战，我们在淘宝特价版的开发中采取了多种优化策略，以提升应用的性能。本文将详细分享我们在Flutter页面优化方面的经验和策略。

最初，我们的首页全部使用了Flutter与DXFlutter框架的组合。虽然在业务实现上效果良好，但在发版测试时，首页的启动性能出现了1秒的明显下降。这一问题的根源在于Flutter动态库的延迟加载和绑定，以及DXFlutter大量模板逻辑带来的性能消耗。

在面对是否继续使用全部Flutter还是回退到Native实现的分歧时，我们做出了一个折中的决定：保持首页推荐页面的Native实现，以减少启动性能的损耗，同时继续使用Flutter实现搜索页面的其他分类。这样既能优化首页的启动性能，又不会对搜索业务的研发模式产生负面影响。

这样的方案也带来了技术挑战。我们使用的Flutter混合栈FlutterBoost仅支持页面级混合，而不支持页面内模块级混合。由于Flutter的单window设计策略，模块级混合会引发页面生命周期管理和渲染窗口尺寸一致性的问题。

为了应对这些挑战，我们在AliFlutter团队的帮助下开发了一种可以容纳Native、Flutter以及其他类型模块的混合容器。我们通过FlutterWrapperVC来解决单引擎渲染问题，根据模块的可见性动态切换FlutterEngine和虚拟机，确保当前可见模块的正常渲染。我们还通过调整窗口大小来解决单window问题，并将这些功能组件化，封装到LTaoUIKit中。

通过这一系列的优化措施，首页的启动时间提升了1秒。更重要的是，这为后续的研发工作奠定了基础，使得推荐页面可以直接复用之前的成熟优化经验。

我们在首页的启动链路上进行了分步治理，并建立了较为体系化的治理建设，从而进一步提升了首页的启动性能。

除了对模块混合页面进行优化，Flutter开发者还常常面临整个页面都是Flutter实现的性能瓶颈。以特价版详情页为例，我们通过一系列优化措施将页面启动时间缩短了100多毫秒。具体的优化数据如下：

Android (vivo y67): 80～100毫秒

iOS (iPhone6): 120～200毫秒

在使用Flutter时，我们发现其性能瓶颈主要体现在以下几个方面：Flutter作为一个UI渲染框架，虽然在多端一致性问题上表现优越，但其性能瓶颈在于Flutter bridge的效率较低，这涉及线程切换、字符编码等问题。我们建议避免直接通过Flutter处理IO等资源访问工作，将这些工作尽量留给Native端处理。

通常情况下，页面的启动涉及到从服务端获取渲染数据，从路由跳转到Flutter Engine初始化VC或Activity，以及Engine构造Rasterizer等多个步骤。在这些步骤中，我们可以进行数据预取，以优化性能。我们在Flutter页面上引入了数据预取策略，但发现Flutter发起的数据请求性能提升并不明显。原因在于Flutter发起的请求需要经过多次线程切换和数据编码解码，导致性能损耗。

为了提高性能，我们采取了以下策略：

在Native侧发起数据预取请求，并在页面路由构造Native VC/Activity时就开始请求数据。

通过ffi机制将mtop返回的数据直接供Flutter读取，绕过Flutter bridge。

使用LRU策略缓存数据，以避免资源泄漏。

设计多级缓存策略，支持页面数据的持久化存储和复用。

将这些能力组件化，以供其他业务复用。

优化后的数据请求链路如下：

我们还设计了多级缓存策略和缓存失效及复用策略，以支持部分页面数据的持久化复用，从而提升首屏渲染性能。

我们支持以下几种缓存复用策略：

激进型：使用上一次缓存数据，不再立即刷新数据，待缓存自然过期后再刷新。适用于数据变化不频繁的页面。

正常型：使用上一次缓存数据，但仍需请求并立即刷新数据。适合数据变化不频繁的页面。

保守型：不使用上一次缓存，需请求最新数据。适用于强实时性的页面数据。

我们将这些能力封装为单独的SDK，以便在iOS侧进行集成和复用。目前，基础链路如详情页、我的页面、店铺页和mini详情页等都采用了这一优化方案，启动性能均有显著提升。

除了上述优化措施，我们还进行了许多其他优化实践，包括详情页截图、资源压缩与本地预置、数据提前异步加载、优化服务端RT和协议精简等。这些优化措施使得特价版的Flutter应用在性能上有了显著提升。

未来，我们还计划对Flutter Engine层面进行优化，考虑使用UC团队的引擎，以进一步提升页面打开性能。ffi及数据预取的方式也可以更激进地进行优化，例如通过Dart2Native实现Json数据的本地编码和解码，预计还能提升至少50毫秒的时间。