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

前端之家收集整理的这篇文章主要介绍了React-Native系列Android——Javascript文件加载过程分析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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


1、JS文件的整合

有这样一个常识:拷贝1001M文件,比拷贝1100M文件要慢的多。

一个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.jsindex.ios.js

–platform:系统平台,android或者ios选其一

–transformerbabel转换器,默认使用\node_modules\react-native\packager\transformer.js

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

–bundle-output: 最终整合的输出文件名,一般是index.android.bundleindex.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.bundleJS文件(无扩展名)。当应用程序启动的时候,只要去加载这个文件,整个React-Native就被完全启动了!

有趣的是,React-Native还额外提供了一个unbundle命令,使用方式和bundle命令完全相同。unbundle命令是在bundle命令的基础上增加了一项功能,除了生成整合JS文件index.android.bundle外,还会生成各个单独的未整合JS文件(但会被优化),全部放在js-modules目录下,同时会生成一个名为UNBUNDLE的标识文件,一并放在其中。UNBUNDLE标识文件的前4个字节固定为0xFB0BD1E5,用于加载前的校验。需要注意的是,js-modules目录会一并打包到apkassets文件夹中,如果使用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来操作,不能直接读取。所以对于这两种情况,分别使用
loadScriptFromAssetsloadScriptFromFile来处理。

两种方式都是通过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<CountableBridge>(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,"file://" + assetNameStr);
  }
  if (env->ExceptionCheck()) {
    return;
  }
  ...
}

assetManager: 指的是 Android系统的资源管理器AssetManager(java),所有资源文件都是通过它来管理的,这里是通过系统动态链接库的android/asset_manager_jni.hAAssetManager_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

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

static void loadApplicationUnbundle(const RefPtr<CountableBridge>& bridge,AAssetManager *assetManager,const std::string& startupCode,const std::string& startupFileName) {
  try {
    bridge->loadApplicationUnbundle(std::unique_ptr<JSModulesUnbundle>(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<JSModulesUnbundle> 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方法的作用是为JavascriptGlobal全局对象动态创建属性函数,这里是创建了一个名为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<const char *>(AAsset_getBuffer(asset.get()));
  }
  ...
  return {sourceUrl,std::string(buffer,AAsset_getLength(asset.get()))};
}

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

总结一下,loadApplicationUnbundle的主要功能是,为JavascriptGlobal全局对象创建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,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,jstring fileName,jstring sourceURL) {
  ...
  auto bridge = jni::extractRefPtr<CountableBridge>(env,obj);
  auto fileNameStr = fileName == NULL ? "" : fromJString(env,fileName);
  ...
  auto script = fileName == NULL ? "" : react::loadScriptFromFile(fileNameStr);
  ...
  loadApplicationScript(bridge,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<char>(jsfile)),std::istreambuf_iterator<char>());
    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<folly::dynamic>());
  m_bridge->callNativeModules(*this,calls,true);
}

手动调用MessageQueue.jsflushedQueue方法,将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文件的加载过程才算真正结束了。


博客不定期持续更新,欢迎关注和交流:

http://blog.csdn.net/megatronkings

原文链接:https://www.f2er.com/react/306707.html

猜你在找的React相关文章