摘要：?weex 旨在兼顧web動態(tài)性與native的用戶體驗，如果想將兩者的優(yōu)勢最大化，那么緩存就顯得格外重要，本文介紹如何利用緩存，實現(xiàn)weex頁面迅速打開，甚至“秒開”的效果。
點此查看原文：http://click.aliyun.com/m/43049/
作者：阿里云-移動云-大前端團(tuán)隊
前言
weex 旨在兼顧web動態(tài)性與native的用戶體驗，如果想將兩者的優(yōu)勢最大化，那么緩存就顯得格外重要，本文介紹如何利用緩存，實現(xiàn)weex頁面迅速打開，甚至“秒開”的效果。
正文
要實現(xiàn) native 端的緩存，需要兩個層面：

• JS 文件緩存
• request 請求緩存

單純緩存JS文件是沒用的，除非你的JS文件是hello world級別：不會在JS內(nèi)部進(jìn)行網(wǎng)絡(luò)請求加載其他資源。有人說我的JS也有網(wǎng)絡(luò)請求，請求了一張圖片，也是可以的呀？十有八九那是 SDWebImage 功勞，那是你實現(xiàn)了圖片加載的協(xié)議，SDWebImage已經(jīng)幫你做了緩存了。 下面詳細(xì)來看下如何讓 weex 在 iOS 上支持常見的網(wǎng)絡(luò)緩存：
JS 文件緩存
大致有兩種思路：

• 預(yù)加載類型：在啟動后，客戶端主動到服務(wù)端拉取會用到JS并緩存。這樣下次用到該JS文件事即可實現(xiàn)“秒開”。
• 類似于傳統(tǒng)的網(wǎng)絡(luò)緩存類型：第一次加載該JS文件時，需要通過網(wǎng)絡(luò)加載，下次訪問時就可以不走網(wǎng)絡(luò)，需要設(shè)置cache策略。

預(yù)加載方式也是常見的緩存方式，啟動后預(yù)先加載，在此不做贅述。 第二種類型，有一篇文章已經(jīng)有比較詳細(xì)的論述：

• 《Weex的JS緩存實現(xiàn)》

具體的思路用流程圖表示如下： 具體的步驟如下：

• 下載JS前重寫renderByUrl
• 渲染時重寫render
• 在頁面使用自定義WXSDKInstance替換原WXSDKInstance

第一步 下載JS前重寫renderByUrl 在拿到服務(wù)端JS的url后，首先判斷是否有本地JS緩存，若有則對比本地JS及服務(wù)端JS的MD5進(jìn)行校驗，校驗通過則直接使用本地JS，否則按原計劃下載服務(wù)端JS。Weex支持使用本地JS文件。 @Overridepublic void renderByUrl(String pageName, String url, Map<String, Object> 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文件獲取成功后，若是從服務(wù)端下載的JS，則需要進(jìn)行文件緩存。 @Overridepublic void render(String pageName, String template, Map<String, Object> options, String jsonInitData, WXRenderStrategy flag) { saveWeexFile(template); super.render(pageName, template, options, jsonInitData, flag);}/*** 異步存儲JS Bundle RX實現(xiàn)* @param template*/private void saveWeexFile(String template){ if(isLocalFile(getBundleUrl())){ return; } Observable .just(template) .map(new Function<String, Boolean>() { @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<Boolean>() { @Override public void accept(Boolean aBoolean) throws Exception { if(aBoolean){ //緩存成功 } } },new Consumer<Throwable>(){ @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();}/*** 判斷是本地文件還是網(wǎng)絡(luò)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頁面更新不頻繁，就沒必要每次都進(jìn)行文件校驗。每次啟動app只進(jìn)行一次文件校驗并緩存MD5，后續(xù)打開頁面進(jìn)行本地MD5校驗。
request 緩存
上面介紹的是JS的緩存，但是 JS 文件緩存后，還是無法實現(xiàn)無網(wǎng)絡(luò)狀況下，直接打開 JS 頁面，JS 頁面還有大量的資源文件，JS 文件內(nèi)部還是會發(fā)送網(wǎng)絡(luò)請求，這些網(wǎng)絡(luò)請求依然需要用到緩存策略。
這個部分的緩存基本的思路如下：

• 與傳統(tǒng)的緩存是一樣的。
• 添加一個緩存方式：先緩存后網(wǎng)絡(luò)。

weex的網(wǎng)絡(luò)請求部分，可以設(shè)置擴(kuò)展，設(shè)置后，所有的weex SDK的網(wǎng)絡(luò)請求都會經(jīng)由該擴(kuò)展處理，所以request部分的請求，實際上與傳統(tǒng)的緩存是一樣的。比如我們熟悉的NSCache、YYCache等第三方的網(wǎng)絡(luò)請求方式也是可以復(fù)用的。
識別以下二維碼，干貨

總結(jié)

以上是生活随笔為你收集整理的weex 在 iOS 上如何实现常见的网络缓存的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。