React-Native系列Android——Javascript文件加载过程分析

React-Native应用程序的内容是由Javascript语言开发的，而Android或者IOS手机系统只是一个容器和各类服务提供者。

众所周知，Javascript是一门解释型脚本语言，对于浏览器而言，浏览器负责解释和执行Javascript脚本。而对于手机系统而言，同样是负责解释和执行Javascript脚本，当然其核心都是使用的webkit内核。

浏览器获取Javascript脚本，主要通过网络下载 + 本地缓存的机制，达到效率的最大化。当然，移动应用也不例外，但不同的是移动应用可以将Javascript脚本直接打包在应用程序内，免去网络下载这个极其不稳定的过程，这样可以达到加载效率和性能流畅的最大化，也就是风靡一时Hybrid技术，而这一点浏览器是做不到的。

无论使用网络下载还是本地文件，最终都是要加载JS文件，而React-Native项目中包含大量的JS文件构成的框架和组件，那么Android框架又是如何去加载它们的呢？这个过程就是本篇博客的研究的主题了！

---

1、JS文件的整合

有这样一个常识：拷贝100个1M的文件，比拷贝1个100M的文件要慢的多。

一个React-Native项目中，包含有成百上千个JS文件，可以想象，如果一次性加载（读）这么多个文件，其效率将会极其低下。但是如果将这些JS文件预先合并成一个文件，然后去加载，其效率肯定能提高很多。

当所有相关的JS文件合并成一个文件后，还需要进行优化。包括去除空格和换行符、代码混淆等，这样处理之后会有两个好处：
1、大幅减小文件大小，无论是对加载效率还是应用体积，好处都是莫大的。
2、提高应用程序的安全性，防止反编译等。

那么，React-Native框架是如何整合JS文件的呢？

首先，需要知道一点，这个整合过程肯定是极其缓慢的，毕竟涉及上千个文件，所以不能是放在应用程序内进行，最合适的做法是预处理，即时机放在打包或者编译时。

另外，Javascript前端开发的模式流程和移动应用开发的模式流程是完全不一样的。Javascript开发者，不需要反复的打包安装应用，对他们而言，一个解释执行器（比如浏览器）就够了，所有的代码都直接放在本地服务器。

React-Native很好地遵循了这一模式，一次安装的应用程序作为解释执行器，nodejs服务器作为本地服务器，所有的JS文件全部部署在这个服务器上。前端开发者修改完代码，直接在应用程序上reload一下就能看到结果。这种模式，对前端开发者来说几乎不要学习什么，完全是轻车熟路的。

所以，JS整合的工作，自然就是交给nodejs服务器来做了！整合过程的细节不是本博客的重点，就不去分析了。

如果是正式发布包，在应用运行时，是不存在本地nodejs服务器这个概念的，所以JS整合文件都是预先打包到assets资源文件里的。下面，来看下这个打包过程。

对JS整合文件的打包逻辑，位于项目\android\app\react.gradle

...
def devEnabled = !targetName.toLowerCase().contains("release")
commandLine "cmd", "/c", "react-native", "bundle", "--platform", "android", "--dev", "${devEnabled}", "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir
...

在gradle打包流程里面插入一个自定义Task任务，即在命令行中运行react-native bundle命令，整合和优化JS文件，存放到assets资源文件目录中。

来看一下react-native bundle命令的参数。

这里写图片描述

–entry-file： 应用入口文件，默认为项目根目录下的index.android.js或index.ios.js

–platform：系统平台，android或者ios选其一

–transformer： babel转换器，默认使用\node_modules\react-native\packager\transformer.js

–dev：是否开发模式，默认开启，此时不会进行JS混淆和压缩优化，方便开发者调试。

–bundle-output： 最终整合的输出文件名，一般是index.android.bundle或index.ios.bundle

–bundle-encoding：整合文件的编码格式，默认utf-8

–assets-dest：整合文件存储目录，android打包时会定义为项目的assets资源编译临时目录。

所以，Android项目打正式包的时候，运行的命令如下：

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output index.android.bundle --assets-dest xxx

其中xxx表示编译资源包时assets所在临时目录，一般为app/build/intermediates/res/merged/release/的绝对路径。

最终apk安装包的assets文件夹下将有一个名为index.android.bundle的JS文件（无扩展名）。当应用程序启动的时候，只要去加载这个文件，整个React-Native就被完全启动了！

有趣的是，React-Native还额外提供了一个unbundle命令，使用方式和bundle命令完全相同。unbundle命令是在bundle命令的基础上增加了一项功能，除了生成整合JS文件index.android.bundle外，还会生成各个单独的未整合JS文件（但会被优化），全部放在js-modules目录下，同时会生成一个名为UNBUNDLE的标识文件，一并放在其中。UNBUNDLE标识文件的前4个字节固定为0xFB0BD1E5，用于加载前的校验。需要注意的是，js-modules目录会一并打包到apk的assets文件夹中，如果使用unbundle命令的话。

另外，unbundle命令是后来增加扩展的功能，到目前为止并没有使用到，这里提到是因为后面分析JS文件加载时会有特殊处理。

---

2、JS文件的加载

不管JS文件是从服务器下载，还是直接使用本地文件，最终都是需要一次性加载到webkit内核的解释器中的。当然，这部分功能都是有Native框架完成的，我们来研究一下。

首先，来看需要加载的对象。

生产模式下，需要加载的JS文件为assets/index.android.bundle

开发模式下，需要先从服务器下载到本地，缓存文件为data/data/package-name/files/ReactNativeDevBundle.js

代码位于com.facebook.react.devsupport.DevSupportManagerImpl.java

public class DevSupportManagerImpl implements DevSupportManager {
   ...
   private static final String JS_BUNDLE_FILE_NAME = "ReactNativeDevBundle.js";
   ...
   // We store JS bundle loaded from dev server in a single destination in app's data dir.
    // In case when someone schedule 2 subsequent reloads it may happen that JS thread will
    // start reading first reload output while the second reload starts writing to the same
    // file. As this should only be the case in dev mode we leave it as it is.
    // TODO(6418010): Fix readers-writers problem in debug reload from HTTP server
    mJSBundleTempFile = new File(applicationContext.getFilesDir(), JS_BUNDLE_FILE_NAME);

}

加载是由JSBundleLoader来处理的，提供了三种处理方式：

1、加载本地JS文件，包括assets文件和普通文件。
2、加载网络JS文件，同时提供缓存目录，方便reload时直接切换到1方式。
3、加载网络JS文件，直接远程调用，用于debug调试。

仔细阅读代码，发现后两种方式，和第1种调用的API一样，所以我们只要看第1种处理方式就行了。

public abstract class JSBundleLoader {

  public static JSBundleLoader createFileLoader(
      final Context context,
      final String fileName) {
    return new JSBundleLoader() {
      @Override
      public void loadScript(ReactBridge bridge) {
        if (fileName.startsWith("assets://")) {
          bridge.loadScriptFromAssets(context.getAssets(), fileName.replaceFirst("assets://", ""));
        } else {
          bridge.loadScriptFromFile(fileName, "file://" + fileName);
        }
      }

      @Override
      public String getSourceUrl() {
        return (fileName.startsWith("assets://") ? "" : "file://") + fileName;
      }
    };
  }
}

和普通的磁盘文件不同，assets文件是存在于apk安装包内的，只能通过AssetManager来操作，不能直接读取。所以对于这两种情况，分别使用
loadScriptFromAssets和loadScriptFromFile来处理。

两种方式都是通过ReactBridge来调用到JNI层，来看这两个native方法注册的部分，位于\jni\react\jni\OnLoad.cpp

registerNatives("com/facebook/react/bridge/ReactBridge", {
     ...
     makeNativeMethod("loadScriptFromAssets", "(Landroid/content/res/AssetManager;Ljava/lang/String;)V", bridge::loadScriptFromAssets),
     makeNativeMethod("loadScriptFromFile", bridge::loadScriptFromFile),
     ...
});

---

2.1 加载Assets文件

先来看bridge::loadScriptFromAssets的逻辑，同样在OnLoad.cpp文件里

static void loadScriptFromAssets(JNIEnv* env, jobject obj, jobject assetManager, jstring assetName) {
  ...
  auto manager = AAssetManager_fromJava(env, assetManager);
  auto bridge = extractRefPtr(env, obj);
  auto assetNameStr = fromJString(env, assetName);
  ...
  auto script = react::loadScriptFromAssets(manager, assetNameStr);
  ...
  if (JniJSModulesUnbundle::isUnbundle(manager, assetNameStr)) {
    loadApplicationUnbundle(bridge, manager, script, "file://" + assetNameStr);
  } else {
    loadApplicationScript(bridge, script, "file://" + assetNameStr);
  }
  if (env->ExceptionCheck()) {
    return;
  }
  ...
}

assetManager: 指的是 Android系统的资源管理器AssetManager（java）, 所有资源文件都是通过它来管理的，这里是通过系统动态链接库的android/asset_manager_jni.h的AAssetManager_fromJava方法获取到AAssetManager（c++）对象的操作指针。

assetName: 这里是文件名，为index.android.bundle

接下来，通过JSLoader对象的loadScriptFromAssets方法读文件，得到字符串script，也就是JS的内容。

下面一步，判断isUnbundle。

前面提过，如果打包时使用unbundle命令，会在assets中生成js-modules文件夹，里面存放着标志文件UNBUNDLE和各个单独未整合到一起的JS文件。在C++层中有着专门的类JniJSModulesUnbundle来处理这些文件，代码位于react\jni\JniJSModulesUnbundle.cpp。

先来看JniJSModulesUnbundle::isUnbundle

const magic_number_t MAGIC_FILE_HEADER = 0xFB0BD1E5;
const std::string MAGIC_FILE_NAME = "UNBUNDLE";
...
bool JniJSModulesUnbundle::isUnbundle(AAssetManager *assetManager, const std::string& assetName) {
  if (!assetManager) {
    return false;
  }

  auto magicFileName = jsModulesDir(assetName) + MAGIC_FILE_NAME;
  auto asset = openAsset(assetManager, magicFileName.c_str());
  if (asset == nullptr) {
    return false;
  }

  magic_number_t fileHeader = 0;
  AAsset_read(asset.get(), &fileHeader, sizeof(fileHeader));
  return fileHeader == htole32(MAGIC_FILE_HEADER);
}

判断标志文件UNBUNDLE是否存在，并校验文件头部4个字节是否为
0xFB0BD1E5

如果isUnbundle为true的话，调用loadApplicationUnbundle，猜测应该是加载js-modules目录下面的单个JS文件了。

static void loadApplicationUnbundle(const RefPtr& bridge, AAssetManager *assetManager, const std::string& startupCode, const std::string& startupFileName) {
  try {
    bridge->loadApplicationUnbundle(std::unique_ptr(new JniJSModulesUnbundle(assetManager, startupFileName)), startupCode, startupFileName);
  } catch (...) {
    translatePendingCppExceptionToJavaException();
  }
}

JniJSModulesUnbundle::JniJSModulesUnbundle(AAssetManager *assetManager, const std::string& entryFile) :
  m_assetManager(assetManager),
  m_moduleDirectory(jsModulesDir(entryFile)) {}

static std::string jsModulesDir(const std::string& entryFile) {
  std::string dir = dirname(entryFile.c_str());

  // android's asset manager does not work with paths that start with a dot
  return dir == "." ? "js-modules/" : dir + "/js-modules/";
}

首先，创建一个JniJSModulesUnbundle对象，里面保存着AAssetManager对象指针m_assetManager和文件根目录m_moduleDirectory，有了这两者，只要知道文件名，就能获取到指定的JS文件了。

接下来，调用bridge->loadApplicationUnbundle，实现代码在react\Bridge.cpp，由于Bridge.cpp只是对JSExecutor的转发，所以直接来看react\JSCExecutor.cpp

void JSCExecutor::loadApplicationUnbundle(std::unique_ptr unbundle, const std::string& startupCode, const std::string& sourceURL) {
  if (!m_unbundle) {
    installGlobalFunction(m_context, "nativeRequire", nativeRequire);
  }
  m_unbundle = std::move(unbundle);
  loadApplicationScript(startupCode, sourceURL);
}

参数中的智能指针unbundle会被赋值给JSCExecutor对象的m_unbundle，由于m_unbundle初始为空，所以第一次会执行installGlobalFunction。

installGlobalFunction方法的作用是为Javascript的Global全局对象动态创建属性函数，这里是创建了一个名为nativeRequire的属性，指向的函数是JSCExecutor::nativeRequire。如果在Javascript代码中使用nativeRequire，就会对应执行JSCExecutor::nativeRequire。

比如，在Javascript中使用：

global.nativeRequire('TextInput')

就会加载assets/js-modules/TextInput.js这个文件，来看nativeRequire的实现细节。

JSValueRef JSCExecutor::nativeRequire(...){
   ...
   JSCExecutor *executor = s_globalContextRefToJSCExecutor.at(JSContextGetGlobalContext(ctx));
   ...
   double moduleId = JSValueToNumber(ctx, arguments[0], exception);
   ...
   executor->loadModule(moduleId);
}

void JSCExecutor::loadModule(uint32_t moduleId) {
  auto module = m_unbundle->getModule(moduleId);
  auto sourceUrl = String::createExpectingAscii(module.name);
  auto source = String::createExpectingAscii(module.code);
  evaluateScript(m_context, source, sourceUrl);
}

JSModulesUnbundle::Module JniJSModulesUnbundle::getModule(uint32_t moduleId) const {
  ...

  std::ostringstream sourceUrlBuilder;
  sourceUrlBuilder << moduleId << ".js";
  auto sourceUrl = sourceUrlBuilder.str();

  auto fileName = m_moduleDirectory + sourceUrl;
  auto asset = openAsset(m_assetManager, fileName, AASSET_MODE_BUFFER);

  const char *buffer = nullptr;
  if (asset != nullptr) {
    buffer = static_cast(AAsset_getBuffer(asset.get()));
  }
  ...
  return {sourceUrl, std::string(buffer, AAsset_getLength(asset.get()))};
}

nativeRequire函数的功能是加载js-modules目录中对应的JS文件，moduleId虽然是int型，但实质上是文件名（区别于通信机制中的moduleId），这里的m_unbundle就是前面保存的JSModulesUnbundle对象的智能指针了。

总结一下，loadApplicationUnbundle的主要功能是，为Javascript的Global全局对象创建nativeRequire函数，Javascript中调用时，能够加载对应的JS文件。

处理完unbundle的逻辑，该继续完成assets/index.android.bundle文件的加载了，前面分析到此文件的内容已经读成字符串script，无论是否isUnbundle，都会调用loadApplicationScript

void JSCExecutor::loadApplicationScript(const std::string& script, const std::string& sourceURL) {
  ...
  String jsScript = String::createExpectingAscii(script);
  ...

  String jsSourceURL(sourceURL.c_str());
  ...
  if (!jsSourceURL) {
    evaluateScript(m_context, jsScript, jsSourceURL);
  } else {
    // If we're evaluating a script, get the device's cache dir
    //  in which a cache file for that script will be stored.
    evaluateScript(m_context, jsScript, jsSourceURL, m_deviceCacheDir.c_str());
  }
  flush();
}

由于sourceURL的值不为空，所以执行的evaluateScript方法是带有缓存目录参数的，m_deviceCacheDir缓存目录为系统的/data/data/cache目录，用来存储script 。

evaluateScript方法的作用就是使用webkit去真正解释执行Javascript了！

---

2.2 加载普通File文件

相比于从assets中加载文件，直接加载磁盘文件就简单得多了，这种只用在开发模式中，加载从本地服务器上down到手机内存中的JS文件。

static void loadScriptFromFile(JNIEnv* env, jobject obj, jstring fileName, jstring sourceURL) {
  ...
  auto bridge = jni::extractRefPtr(env, obj);
  auto fileNameStr = fileName == NULL ? "" : fromJString(env, fileName);
  ...
  auto script = fileName == NULL ? "" : react::loadScriptFromFile(fileNameStr);
  ...
  loadApplicationScript(bridge, script, jni::fromJString(env, sourceURL));
  ...
}

先将fileName对应的文件内容读读取成字符串script，然后调用loadApplicationScript使用webkit内核解释执行，需要特别注意的是如果fileName为空或者文件不存在，webkit内核在加载时，会使用sourceURL自动下载并缓存。

读文件loadScriptFromFile的实现在react\jni\JSLoader.cpp中

std::string loadScriptFromFile(const std::string& fileName) {
  ...
  std::ifstream jsfile(fileName);
  if (jsfile) {
    std::string output;
    jsfile.seekg(0, std::ios::end);
    output.reserve(jsfile.tellg());
    jsfile.seekg(0, std::ios::beg);
    output.assign((std::istreambuf_iterator(jsfile)), std::istreambuf_iterator());
    return output;
  }
  ...
  return "";
}

简单的文件读取操作，不细说了。

---

3、最后一步

你以为到这里就结束了？当然不了！

还漏了一步，loadApplicationScript中使用evaluateScript解释执行Javascript代码，是没有处理执行结果的，也就是意味着Javascript的加载执行最终并没有能够和Native完全建立通信连接，所以Javascript的执行结果并没有反馈到Native端。

原因是我们漏了最后一步：flush

void JSCExecutor::flush() {
  // TODO: Make this a first class function instead of evaling. #9317773
  std::string calls = executeJSCallWithJSC(m_context, "flushedQueue", std::vector());
  m_bridge->callNativeModules(*this, calls, true);
}

手动调用MessageQueue.js的flushedQueue方法，将Javascript执行过程中需要调用Native组件的通信请求通知到Native。这个过程在React-Native系列Android——Native与Javascript通信原理（二）中详细分析过。

  flushedQueue() {
    this.__callImmediates();

    let queue = this._queue;
    this._queue = [[], [], [], this._callID];
    return queue[0].length ? queue : null;
  }

这样，在JS加载后，Native组件也就被调用起来了，比如视图结构等等。

到此，JS文件的加载过程才算真正结束了。