android h5预加载js和css提升打开速度

使用webpack加vue开发单页面程序时，不可避免的会生成大量的css和js文件，常规的优化方案是：

• 拆分第三方库，改为cdn
• vue模块改为懒加载
• 服务器启用gzip减少文件体积

这些操作可以明显提升50%效果，但是在APP中，还是无法达到秒开，所以我们还需要着手对APP进行优化，优化的思路如下：

1. 保存第三方js/css到文件夹（Assets目录）
2. 预加载本地js/css文件进行缓存
3. 当访问h5页面时，拦截js/css文件的访问请求，替换缓存中的本地文件

1.保存第三方js、css文件

首先，将项目中用到的第三方文件保存在Assets目录中

2.预加载本地js/css文件进行缓存

在初始化APP时候，下载h5页面的所有html，然后用正则匹配出所有的本地css和js文件，并且将这些文件存在缓存目录中。

private void cacheWebviewJs() {
   
        HttpClient httpClient = HttpClient.getInstance();
        httpClient.getHttpRequestGet("http://www.xxx.com/", new HttpRequestBack() {
   
            @Override
            public void back(String s) {
   
                List<String> strs = new ArrayList<String>();
                Pattern p = Pattern.compile("href=([css,js][^\\s]*)");
                Matcher m = p.matcher(s);
                while (m.find()) {
   
                    strs.add(m.group(1));
                }
                for (int i = 0; i < strs.size(); i++) {
   
                    String domain = "http://www.xxx.com/";
                    String path = domain + strs.get(i);
                    String[] filenameArr = path.split("/");
                    String filename = filenameArr[filenameArr.length - 1];
                    String savePath = Environment.getExternalStorageDirectory() + "/xxxapp/data/"; + filename;
                    File cacheFile = new File(savePath);
                    if(!cacheFile.exists()){
   
                        Log.i("====cacheWebviewJs====", savePath);
                        SaveDataUtils.writeUrToStrealm(cacheFile,path);
                    }
                }
            }
      

3.拦截js、css请求，并且替换为本地文件

这里进行区分，第三方库的js、css文件，和本地的文件，要分别替换。
这么做目的是防止将来第三方库js文件重名，导致h5无法正确执行。

webView.setWebViewClient(new WebViewClient() {
   
			//只处理21版本以上的安卓程序，以下版本的不是这个方法
            @TargetApi(Build.VERSION_CODES.LOLLIPOP)
            @Override
            public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
   
                Uri uri = request.getUrl();
                String path = uri.getPath();
                if (path.contains(".js") || path.contains(".css")) {
   
                    String[] arr = path.split(