移动端页面秒开优化总结

前言

  App优化，是一个工作、面试或KPI都绕不开的话题，如何让用户使用流畅呢？今天谨以此篇文章总结一下过去两个月我在工作中的优化事项到底有那些，优化方面还算小白，有不对的地方还望指出海涵, 该文章主要通过讲述Native跳转到Flutter界面秒开率提升。

问题分析

  当你拿到反馈App页面渲染时间长的工单的时候，第一步想到的不应该是有那些那些方法可以降低耗时，我们应该根据自己的真实业务触发，第一步 验证 通过打点或者工具去验证这个问题，了解 一个页面打开耗时的统计方式，分析一个打开耗时是由那些方面组成，通过那些技术手段去解决80%的问题，抓大放小去处理问题。

  通过工具分析启动链路耗时，发现部分必要接口RT时间较长，Flutter引擎冷启耗时较长和View渲染耗时为主要耗时项。接下来就围绕着三个大方面去做一些优化。

网络优化

   以Android 界面跳转链路来说 ，具体链路看下图（模拟数据 主要明白思想）

image.png

   看到串行，就知道这里肯定可以有文章做

image.png

  可以看到在网络请求可以提前到 Router环节去解析并进行预加载，并行的话可以优化 必要接口RT的时长，节省的时间在页面秒开链路中占比最多。

  在这里需要兼容网络返回较慢的情况，我们可以引入骨架图，提升上屏率。

数据预请求

Router和请求

  通过拦截路由地址，判断路径是否属于预请求白名单。如果匹配，进入预请求逻辑，发起网络拼接和请求，在获取到结果进行本地缓存，供消费界面去消费。因为考虑到网络返回如果慢与界面，可以提供回调，消费界面进来进行绑定。

端侧通讯

   由于Native 跳转到 Flutter ，所以这里需要借助 Channel来进行管道传递，这里我们没有使用MethodChannel 而是选择 可以Native主动通知Flutter 的EventChannel来接收消息。

public class EventChannelManager implements IFlutterProphetPlugin {
    private static Map cachedEventSinkMap = new HashMap<>();
    private static LinkedList