摘要：?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文件。 @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文件獲取成功后，若是從服務端下載的JS，則需要進行文件緩存。 @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實現* @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();}/*** 判斷是本地文件還是網絡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等第三方的網絡請求方式也是可以復用的。
識別以下二維碼，干貨

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。