网站项目有需要什么技术支持,wordpress 弹出视频播放,南昌优化网站分析,网站制作1000元摘要#xff1a;weex 旨在兼顾web动态性与native的用户体验#xff0c;如果想将两者的优势最大化#xff0c;那么缓存就显得格外重要#xff0c;本文介绍如何利用缓存#xff0c;实现weex页面迅速打开#xff0c;甚至“秒开”的效果。点此查看原文#xff1a;http://cli…摘要 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, MapString, 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 ;}第二步 渲染时重写renderJS文件获取成功后若是从服务端下载的JS则需要进行文件缓存。Overridepublic void render(String pageName, String template, MapString, 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 FunctionString, 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 ConsumerBoolean() { Override public void accept(Boolean aBoolean) throws Exception { if(aBoolean){ //缓存成功 } } },new ConsumerThrowable(){ 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等第三方的网络请求方式也是可以复用的。识别以下二维码干货
