安卓用户使用微信H5牛牛平台性能优化方面的探索方案

仰天大笑出门去,我辈岂是蓬蒿人。这篇文章主要讲述安卓用户使用微信H5牛牛平台性能优化方面的探索方案相关的知识,希望能为你提供帮助。
经常遇到一个问题,微信H5牛牛平台网站(h5.fanshubbs.com)页面由于缓存问题经常在微信H5牛牛平台网站(h5.fanshubbs.com)发布新版本之后客户端App看不到最新的效果,之前由于杂七杂八的问题项目工期紧没好好研究,最近抽空研究了下缓存问题。
缓存问题具体表现为:UIWebview首次打开加载慢;第二次加载速度明显快;H5资源更新过后在App上看不到更改的效果
为此我认为是缓存造成的问题,我进入App目录下,看到Library下的Caches下面有很多文件名称很长的文件,点击预览可以看到是图片、css等,本来我想着找出微信H5牛牛平台网站资源缓存到App中的特点,然后用NSFileManager删除掉缓存文件,发现此路不通。
我想通过控制变量法研究缓存是否存在。 做了一个实验。步骤如下:

  • 用HBuilder(一个编辑器,开启后本机端口8020就可以访问网页)打开微信H5牛牛工程
  • 在App的一个UIWebview页面上通过和电脑在同一个局域网的方式加载网页
  • 在App上查看效果,观察某个元素的样式
  • 在HBuilder编辑器中修改元素样式
  • 在App上将UIWebView返回上一界面,再次进入查看该元素的样式
  • 确定有没有变化,来确定有没有缓存
结论:页面实时效果变化的,没有缓存
对比实验:
  • 用HBuilder(一个编辑器,开启后本机端口8020就可以访问网页)打开H5工程
  • git提交到服务端
  • 在App的一个UIWebview页面上通过公网IP的方式加载网页
  • 在App上查看效果,观察某个元素的样式
  • 在HBuilder编辑器中修改元素样式
  • git提交后发布到服务器上
  • 在App上将UIWebView返回上一界面,再次进入查看该元素的样式
  • 确定有没有变化,来确定有没有缓存
结论:微信H5牛牛页面没有看到最新的效果,明显缓存了。但是我很想知道为什么本地局域网的方式请求网页不会缓存,而通过公网IP的方式会缓存。
为此,我做了进一步的实验,用谷歌浏览器分别请求本地局域网和公网ip查看资源加载的情况。
1、公网IP
2、本地局域网
关键词Status Code
结论:从微信H5牛牛可以看出本地局域网不管首次加载还是刷新都是直接请求;而通过局域网的方式请求:首次请求是从服务器上获取,在此刷新的时候是从(from memory cache)中获取的。
猜想微信H5牛牛平台网站局域网 的方式网速都比较快所以不会缓存;
公网IP的方式可能由于网速问题会将首次请求到的资源缓存下来。
所以确定缓存存在了,那么如何避免缓存?
  • App在启动后请求一个接口,这个接口的目的是获取当前H5资源的版本号
  • 将获得的版本号保存下来(App本地保存)
  • 由于UIWebView上加载网页,发起网络请求都可以通过一个代理方法所拦截,所以我们可以在这个代理方法中判断url的参数
  • 由于我们的App使用了不同模块的UIWebView,但是都是在UIWebView上需要大量的JS交互,所以使用了WebViewjavascriptBridge这个库。UIWebView本身的代理方法不会执行,所以修改这个库里面的WebViewjavascriptBridge.m文件的代码,差不多是下面的方式
- (BOOL)webView:(UIWebView  *)webView shouldStartLoadWithRequest:(NSURLRequest  *)request navigationType:(UIWebViewNavigationType)navigationType {
        if  (webView != _webView) { return  YES; }
        NSURL  *url = [rntity Tag 的资源直接访问equest URL];
        if  ([request.URL.absoluteString  containsString:@"http"] || [request.URL.absoluteString  containsString:@"https"]) {
                if  ([request.URL.absoluteString  containsString:@"?"]) {
                        url = [NSURL  URLWithString:[NSString  stringWithFormat:@"%@& h5V=%@",request.URL.absoluteString,[ProjectUtil getH5VersionString]]];
                }else{
                        url = [NSURL  URLWithString:[NSString  stringWithFormat:@"%@?h5V=%@",request.URL.absoluteString,[ProjectUtil getH5VersionString]]];
                }
        }
        LBPLOG(@"url-> %@",[url absoluteString]);
        __strong  WVJB_WEBVIEW_DELEGATE_TYPE* strongDelegate = _webViewDelegate;
        if  ([_base isCorrectProcotocolScheme:url]) {
                if  ([_base isBridgeLoadedURL:url]) {
                        [_base injectJavascriptFile];
                } else  if  ([_base isQueueMessageURL:url]) {
                        NSString  *messageQueueString = [self  _evaluate[removed][_base webViewJavascriptFetchQueyCommand]];
                        [_base flushMessageQueue:messageQueueString];
                } else  {
【安卓用户使用微信H5牛牛平台性能优化方面的探索方案】                        [_base logUnkownMessage:url];
                }
                return  NO;
        } else  if  (strongDelegate & & [strongDelegate respondsToSelector:@selector(webView:shouldStartLoadWithRequest:navigationType:)]) {
                return  [strongDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];
        } else  {
                return  YES;
        }
}
总结:
微信H5牛牛平台网站App的缓存问题暂时研究到这里,后期会继续研究其他方面的问题

    推荐阅读