React-Native安卓预加载优化方案-原创手记-慕课网

本文作者：ivweb 朱灵子原文出处：IVWEB社区 未经同意，禁止转载

React-Native安卓预加载优化方案

本文针对使用React Native开发混合应用的过程中安卓端白屏时间较长的问题，提出了react-native安卓端RootView预加载优化方案，本文主要围绕以下几个方面展开分析：

导致React-Native安卓端白屏时间较长的关键性因素
React-Native安卓预加载优化方案
React-Native安卓预加载方案实现细节

导致React-Native安卓端白屏时间较长的关键性因素

我们对不同网络状态下不同机型的React-Native线上项目进行了实时性能监控，下图所示为React Native IOS和安卓端线上性能数据对比分析图

对比IOS端与Android端的首屏时间数据，我们发现安卓端占有一定的劣势，我们在启动React-Native安卓应用时，会发现第一次启动React-Native安卓页面会有一个短暂的白屏过程，而且在完全退出后再进入，仍然会有这个白屏，为什么Android端的白屏时间较IOS较长呢？我们首先分析React-Native页面加载各个阶段的时间响应图

通过观察我们可以发现，React-Native页面加载时间占比最大的是React-Native bundle离线包加载与解析的时间，其次是首屏数据获取的时间。针对首屏获取时间较长的问题，项目已经采用React-Native前端异步数据缓存优化方案，而且在IOS和安卓端数据返回的平均值均在180ms左右，而页面加载的过程中界面渲染以及框架初始化的时间占比均只有9.3%，不为导致IOS和安卓端首屏时间差异较大的关键因素。综上可知，导致React-Native安卓端白屏时间较长的关键性因素是bundle离线包加载与解析的时间较长，因为React-Native安卓端bundle离线包加载与解析的过程是在java端完成的，而IOS bundle离线包加载与解析的过程是在Objective-C端完成的，java的执行效率较低，同时部分安卓低端机型性能较差。

因此，java执行效率较OC来讲相对较低，安卓端机型总体性能与IOS相比占有相对劣势都是导致React-Native安卓端bundle离线包加载与解析的时间较长的原因，也是造成React-Native安卓端白屏时间较长的关键性因素。

React-Native安卓预加载优化方案

为了优化React-Native安卓端线上业务的用户体验，我们提出了React-Native安卓Bundle预加载优化方案

首先展示的是React-Native安卓源码端ReactActivity中的onCreate方法

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  if (getUseDeveloperSupport() && Build.VERSION.SDK_INT >= 23) {
    // Get permission to show redbox in dev builds.
    if (!Settings.canDrawOverlays(this)) {
      Intent serviceIntent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION);
      startActivity(serviceIntent);
      FLog.w(ReactConstants.TAG, REDBOX_PERMISSION_MESSAGE);
      Toast.makeText(this, REDBOX_PERMISSION_MESSAGE, Toast.LENGTH_LONG).show();
    }
  }
  mReactRootView = createRootView();
  mReactRootView.startReactApplication(
    getReactNativeHost().getReactInstanceManager(),
    getMainComponentName(),
    getLaunchOptions());
  setContentView(mReactRootView);
  mDoubleTapReloadRecognizer = new DoubleTapReloadRecognizer();
}

ReactInstanceManager是用来创建及管理CatalyInstance的实例的上层接口、控制开发调试，生命周期与ReactRootView所在activity保持一致。ReactActivity onCreate方法中的getReactInstanceManager()步骤中执行了bundle离线包文件位置与bundle文件名的设置，如下代码所示

ReactInstanceManager.Builder builder = ReactInstanceManager.builder()
  .setApplication(mApplication)
  .setJSMainModuleName(getJSMainModuleName())
  .setUseDeveloperSupport(getUseDeveloperSupport())
  .setRedBoxHandler(getRedBoxHandler())
  .setUIImplementationProvider(getUIImplementationProvider())
  .setInitialLifecycleState(LifecycleState.BEFORE_CREATE);

for (ReactPackage reactPackage : getPackages()) {
  builder.addPackage(reactPackage);
}

String jsBundleFile = getJSBundleFile();
if (jsBundleFile != null) {
  builder.setJSBundleFile(jsBundleFile);
} else {
  builder.setBundleAssetName(Assertions.assertNotNull(getBundleAssetName()));
}
builder.build();

为了优化安卓端bundle离线包加载与解析的过程，我们需要将ReactActivity onCreate方法中的createRootView、startReactApplication以及getReactInstanceManager这些步骤提前，也就是实现react-native安卓端RootView预加载。

React-Native安卓预加载方案实现细节

创建预加载类ReactPreLoader

public class ReactPreLoader {
    private static final String TAG = "ReactPreLoader";
    private static final Map<String, ReactRootView> CACHE_VIEW_MAP =
            new ArrayMap<>();
    /**
     * Get {@link ReactRootView} with corresponding {@link ReactInfo}.
     */
    public static ReactRootView getRootView(ReactInfo reactInfo) {
        return CACHE_VIEW_MAP.get(reactInfo.getMainComponentName());
    }
    /**
     * Pre-load {@link ReactRootView} to local {@link Map}, you may want to
     * load it in previous activity.
     */
    public static void init(Activity activity, ReactInfo reactInfo) {
        if (CACHE_VIEW_MAP.get(reactInfo.getMainComponentName()) != null) {
            return;
        }
        ReactRootView rootView = new ReactRootView(activity);
        rootView.startReactApplication(
                ((ReactApplication) activity.getApplication()).getReactNativeHost().getReactInstanceManager(),
                reactInfo.getMainComponentName(),
                reactInfo.getLaunchOptions());
        CACHE_VIEW_MAP.put(reactInfo.getMainComponentName(), rootView);
    }
    /**
     * Remove {@link ReactRootView} from parent.
     */
    public static void onDestroy(ReactInfo reactInfo) {
        try {
            ReactRootView rootView = getRootView(reactInfo);
            ViewGroup parent = (ViewGroup) rootView.getParent();
            if (parent != null) {
                parent.removeView(rootView);
            }
        } catch (Throwable e) {
            Logger.e(TAG, e);
        }
    }
}

在init操作中，我们通过ReactInfo缓存把view缓存在本地的ArrayMap
同时为了优化React-Native线上项目内存方面的占用率，在ReactActivity销毁后，我们需要使用onDestroy()方法把view从 parent 上卸载下来

获取预加载之后缓存在本地ArrayMap中的rootView

为了获取并使用预加载之后缓存在本地ArrayMap中的rootView，我们需要侵入activity的创建过程，因此我们需要对React-Native原生库库提供的ReactActivity进行改造，以下列出修改方法：

public abstract class MrReactActivity extends Activity
        implements DefaultHardwareBackBtnHandler, PermissionAwareActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getUseDeveloperSupport() && Build.VERSION.SDK_INT >= 23) {
            // Get permission to show redbox in dev builds.
            if (!Settings.canDrawOverlays(this)) {
                Intent serviceIntent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION);
                startActivity(serviceIntent);
                FLog.w(ReactConstants.TAG, REDBOX_PERMISSION_MESSAGE);
                Toast.makeText(this, REDBOX_PERMISSION_MESSAGE, Toast.LENGTH_LONG).show();
            }
        }
        mReactRootView = ReactPreLoader.getRootView(getReactInfo());
        if (mReactRootView != null) {
            Logger.i(TAG, "use pre-load view");
        } else {
            Logger.i(TAG, "createRootView");
            mReactRootView = createRootView();
            if (mReactRootView != null) {
                mReactRootView.startReactApplication(
                        getReactNativeHost().getReactInstanceManager(),
                        getMainComponentName(),
                        getLaunchOptions());
            }
        }
        setContentView(mReactRootView);
        mDoubleTapReloadRecognizer = new DoubleTapReloadRecognizer();
    }
    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (mReactRootView != null) {
            mReactRootView.unmountReactApplication();
            mReactRootView = null;
            ReactPreLoader.onDestroy(getReactInfo());
        }
    }
    public abstract ReactInfo getReactInfo();
}

使用预加载之后缓存在本地ArrayMap中的rootView

首先，在进入当前React-Native activity 的父级 activity调用ReactPreLoader中的init方法，如下图所示：

ReactPreLoader.init(this, ReactCardActivity.reactInfo);

其中ReactCardActivity继承上一个模块中对React-Native源码库进行简单改造后的ReactActivity：

public class ReactCardActivity extends MrReactActivity {
    public static final ReactInfo reactInfo = new ReactInfo("card", null);
    @Override
    protected String getMainComponentName() {
        return reactInfo.getMainComponentName();
    }
    @Override
    public ReactInfo getReactInfo() {
        return reactInfo;
    }
}

该React-Native安卓端预加载优化方案可以很大程度上减少安卓端React-Native线上项目的白屏时间，优化React-Native线上业务的业务体验！