摘要： weex 旨在兼顾web动态性与native的用户体验，如果想将两者的优势最大化，那么缓存就显得格外重要，本文介绍如何利用缓存，实现weex页面迅速打开，甚至“秒开”的效果。
点此查看原文：http://click.aliyun.com/m/43049/
作者：阿里云-移动云-大前端团队
前言
weex 旨在兼顾web动态性与native的用户体验，如果想将两者的优势最大化，那么缓存就显得格外重要，本文介绍如何利用缓存，实现weex页面迅速打开，甚至“秒开”的效果。
正文
要实现 native 端的缓存，需要两个层面：
JS 文件缓存
request 请求缓存
单纯缓存JS文件是没用的，除非你的JS文件是hello world级别：不会在JS内部进行网络请求加载其他资源。有人说我的JS也有网络请求，请求了一张图片，也是可以的呀？十有八九那是 SDWebImage 功劳，那是你实现了图片加载的协议，SDWebImage已经帮你做了缓存了。
下面详细来看下如何让 weex 在 iOS 上支持常见的网络缓存：
JS 文件缓存
大致有两种思路：
预加载类型：在启动后，客户端主动到服务端拉取会用到JS并缓存。这样下次用到该JS文件事即可实现“秒开”。
类似于传统的网络缓存类型：第一次加载该JS文件时，需要通过网络加载，下次访问时就可以不走网络，需要设置cache策略。
预加载方式也是常见的缓存方式，启动后预先加载，在此不做赘述。
第二种类型，有一篇文章已经有比较详细的论述：
《Weex的JS缓存实现》
具体的思路用流程图表示如下：
具体的步骤如下：
下载JS前重写renderByUrl
渲染时重写render
在页面使用自定义WXSDKInstance替换原WXSDKInstance
第一步 下载JS前重写renderByUrl
在拿到服务端JS的url后，首先判断是否有本地JS缓存，若有则对比本地JS及服务端JS的MD5进行校验，校验通过则直接使用本地JS，否则按原计划下载服务端JS。Weex支持使用本地JS文件。
@Override
public void renderByUrl(String pageName, String url, Map options, String jsonInitData, WXRenderStrategy flag) {
String local = "";
if(TextUtils.isEmpty(url) || md5Check(url)){
local = getLocalJs();//获取本地JS路径
}
if(!TextUtils.isEmpty(local){
super.renderByUrl(pageName, local, options, jsonInitData, flag);
}else {
super.renderByUrl(pageName, url, options, jsonInitData, flag);
}
}
/**
* 获取本地JS路径
*/
private String getLocalJs(){
try {
File f = new File(context.getFilesDir(), "local_js.txt");
if(f.exists()) {
return "file://" + f.getAbsolutePath();
}
} catch (Exception e) {
}
return "";
}
第二步 渲染时重写render
JS文件获取成功后，若是从服务端下载的JS，则需要进行文件缓存。
@Override
public void render(String pageName, String template, Map options, String jsonInitData, WXRenderStrategy flag) {
saveWeexFile(template);
super.render(pageName, template, options, jsonInitData, flag);
}
/**
* 异步存储JS Bundle RX实现
* @param template
*/
private void saveWeexFile(String template){
if(isLocalFile(getBundleUrl())){
return;
}
Observable
.just(template)
.map(new Function() {
@Override
public Boolean apply(String s) throws Exception {
//weex对文件名不敏感，存txt文件
return FileUtil.saveFile(context.getFilesDir().getAbsolutePath(), "local_js.txt", s.getBytes("UTF-8"));
}
})
.subscribeOn(Schedulers.io())
.subscribe(new Consumer() {
@Override
public void accept(Boolean aBoolean) throws Exception {
if(aBoolean){
//缓存成功
}
}
},new Consumer(){
@Override
public void accept(Throwable throwable) throws Exception {
throwable.printStackTrace();
}
});
}
/**
* 异步存储JS Bundle
* @param template
*/
private void saveWeexFile(String template){
if(isLocalFile(getBundleUrl())){
return;
}
Thread thread = new Thread( new Runnable(){
@Override
public void run(){
FileUtil.saveFile(context.getFilesDir().getAbsolutePath(), "local_js.txt", template.getBytes("UTF-8"));
}
});
thread.start();
}
/**
* 判断是本地文件还是网络url
*/
private boolean isLocalFile(String url){
if(TextUtils.isEmpty(url){
return false;
}
Uri uri = Uri.parse(url);
if (uri != null && TextUtils.equals(uri.getScheme(), "file")) {
return true;
}
return false;
}
第三步 在页面使用自定义WXSDKInstance替换原WXSDKInstance
注意：如果weex页面更新不频繁，就没必要每次都进行文件校验。每次启动app只进行一次文件校验并缓存MD5，后续打开页面进行本地MD5校验。
request 缓存
上面介绍的是JS的缓存，但是 JS 文件缓存后，还是无法实现无网络状况下，直接打开 JS 页面，JS 页面还有大量的资源文件，JS 文件内部还是会发送网络请求，这些网络请求依然需要用到缓存策略。
这个部分的缓存基本的思路如下：
与传统的缓存是一样的。
添加一个缓存方式：先缓存后网络。
weex的网络请求部分，可以设置扩展，设置后，所有的weex SDK的网络请求都会经由该扩展处理，所以request部分的请求，实际上与传统的缓存是一样的。比如我们熟悉的NSCache、YYCache等第三方的网络请求方式也是可以复用的。
识别以下二维码，阅读更多干货