解决webview加载网页由于下载JS文件导致加载慢的问题
webview加载服务器上的网页时,由于前端在渲染H5的时候需要引用JS代码文件(我的猜想,不懂前端),有的JS代码库时通用的,比较大,如果从服务器下载,在网络差的情况下需要一定的时间,导致页面加载变慢,甚至出现webview加载页面变白无法加载任何东西的问题,所以此时需要优化,想到的一个解决策略是将那些通用不变的大的js代码库放到手机本地和apk一起打包,
然后在webview加载服务器的H5时通过判断引用的js文件名称,进行白名单控制,如果时本地已经存在的直接从本地获取,不用再从服务器加载,减少下载时间,具体方法如下:
mWebviewPage.setWebViewClient(new WebViewClient() { @Override public WebResourceResponse shouldInterceptRequest(WebView view, String url) { Log.d(TAG,"=====url="+url); if(url.contains("echarts-all-3.js")){//加载指定.js时 引导服务端加载本地Assets/www文件夹下的cordova.js try { return new WebResourceResponse("application/x-javascript","utf-8",getBaseContext().getAssets().open("plugin/echarts-all-3.js")); } catch (IOException e) { e.printStackTrace(); } } else if(url.contains("vue.min.js")) { try { return new WebResourceResponse("application/x-javascript","utf-8",getBaseContext().getAssets().open("plugin/vue.min.js")); } catch (IOException e) { e.printStackTrace(); } } return super.shouldInterceptRequest(view, url); } @Override public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { Log.d(TAG,"=====request.getUrl()="+request.getUrl().toString()); if(request.getUrl().toString().contains("echarts-all-3.js")){//加载指定.js时 引导服务端加载本地Assets/www文件夹下的cordova.js try { return new WebResourceResponse("application/x-javascript","utf-8",getBaseContext().getAssets().open("plugin/echarts-all-3.js")); } catch (IOException e) { e.printStackTrace(); } } } return super.shouldInterceptRequest(view, request); }
从Log可以看出在加载过程中确认有很多url访问js库文件:
刚开始一直想寻找服务器上的H5页面能否直接访问手机端本地的js文件,后来参考了如下 文章找到的这个替代解决方案也是一样的效果:https://blog.csdn.net/garfield38/article/details/55045919
从代码中看WebResourceResponse这个类中是由inputstream 这个参数的,即是将要访问的数据作为流返回给webview了,
浏览器的渲染以及资源加载都是在一个线程中,如果在shouldInterceptRequest 处理时间过长,WebView界面就会阻塞,这是非常非常不好的。shouldInterceptRequest 此方法中的动作可以改为异步执行,不过没有尝试过,如果资源还没有获取到,那线程渲染是否能继续,这是个问题。