常用资源预加载

上面介绍的缓存技术，能优化二次启动 WebView 的加载速度，那首次加载 H5 页面的速度该怎么优化呢？上面分析了一次加载过程会有许多外部依赖的 JS、CSS、图片等资源需要下载，那我们能不能提前将这些资源下载好，等H5 加载时直接替换呢？

好在从 API 11（Android 3.0）开始，WebView 引入了 shouldInterceptRequest 函数，这个函数有两种重载。

• public WebResourceResponse shouldInterceptRequest(WebView webView, String url) 从 API 11 引入，API 21 废弃
• public WebResourceResponse shouldInterceptRequest (WebView view, WebResourceRequest request) 从 API 21 开始引入

考虑到目前大多数 App 还要支持 API 14，所以还是使用 shouldInterceptRequest (WebView view, String url) 为例。

WebView mWebView = (WebView) findViewById(R.id.webview);
mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public WebResourceResponse shouldInterceptRequest(WebView webView, final String url) {
                WebResourceResponse response = null;
                // 检查该资源是否已经提前下载完成。我采用的策略是在应用启动时，用户在 wifi 的网络环境下                // 提前下载 H5 页面需要的资源。
                boolean resDown = JSHelper.isURLDownValid(url);
                if (resDown) {
                    jsStr = JsjjJSHelper.getResInputStream(url);
                    if (url.endsWith(".png")) {
                        response = getWebResourceResponse(url, "image/png", ".png");
                    } else if (url.endsWith(".gif")) {
                        response = getWebResourceResponse(url, "image/gif", ".gif");
                    } else if (url.endsWith(".jpg")) {
                        response = getWebResourceResponse(url, "image/jepg", ".jpg");
                    } else if (url.endsWith(".jepg")) {
                        response = getWebResourceResponse(url, "image/jepg", ".jepg");
                    } else if (url.endsWith(".js") && jsStr != null) {
                        response = getWebResourceResponse("text/javascript", "UTF-8", ".js");
                    } else if (url.endsWith(".css") && jsStr != null) {
                        response = getWebResourceResponse("text/css", "UTF-8", ".css");
                    } else if (url.endsWith(".html") && jsStr != null) {
                        response = getWebResourceResponse("text/html", "UTF-8", ".html");
                    }
                }
                // 若 response 返回为 null , WebView 会自行请求网络加载资源。 
                return response;
            }
        });

private WebResourceResponse getWebResourceResponse(String url, String mime, String style) {
        WebResourceResponse response = null;
        try {
            response = new WebResourceResponse(mime, "UTF-8", new FileInputStream(new File(getJSPath() + TPMD5.md5String(url) + style)));
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }
        return response;
    }

public String getJsjjJSPath() {
        String splashTargetPath = JarEnv.sApplicationContext.getFilesDir().getPath() + "/JS";
        if (!TPFileSysUtil.isDirFileExist(splashTargetPath)) {
            TPFileSysUtil.createDir(splashTargetPath);
        }
        return splashTargetPath + "/";
    }

常用 JS 本地化及延迟加载

比预加载更粗暴的优化方法是直接将常用的 JS 脚本本地化，直接打包放入 apk 中。比如 H5 页面获取用户信息，设置标题等通用方法，就可以直接写入一个 JS 文件，放入 asserts 文件夹，在 WebView 调用了onPageFinished() 方法后进行加载。需要注意的是，在该 JS 文件中需要写入一个 JS 文件载入完毕的事件，这样前端才能接受都爱 JS 文件已经种植完毕，可以调用 JS 中的方法了。 附上一段本地化的 JS 代码。

javascript: ;
(function() {
  try{
    window.JSBridge = {
      'invoke': function(name) {
        var args = [].slice.call(arguments, 1),
          callback = args.pop(),
          params, obj = this[name];
        if (typeof callback !== 'function') {
          params = callback;
          callback = function() {}
        } else {
          params = args[0]
        } if (typeof obj !== 'object' || typeof obj.func !== 'function') {
          callback({
            'err_msg': 'system:function_not_exist'
          });
          return
        }
        obj.callback = callback;
        obj.params = params;
        obj.func(params)
      },
      'on': function(event, callback) {
        var obj = this['on' + event];
        if (typeof obj !== 'object') {
          callback({
            'err_msg': 'system:function_not_exist'
          });
          retrun
        }
        if (typeof callback !== 'undefined') obj.callback = callback
      },
      'login': {
        'func': function(params) {
          prompt("login", JSON.stringify(params))
        },
        'params': {},
        'callback': function(res) {}
      },
      'settitle': {
        'func': function(params) {
          prompt("settitle",JSON.stringify(params))
        },
        'params': {},
        'callback': function(res) {}
      },
    }catch(e){
    alert('demo.js error:'+e);
  }
  var readyEvent = document.createEvent('Events');
  readyEvent.initEvent('JSBridgeReady', true, true);
  document.dispatchEvent(readyEvent)
})();