有赞webview加速平台探索与建设（三）——html加速

安宇雨 - 随手采集
2019-09-26 18:06:13
随手采集
0000-未整理-等待研究

1. 概要

从之前的两篇文章当中，已经分析了我们的金翅h5加速平台，以及如何做静态资源的加速。这一章将主要集中在如何做html加速优化。

html加速优化也是所有优化手段中，对白屏时间优化效果最为明显的！

以预取html内容作缓存的方式实现加速，需要解决以下问题：

如何在native端代理html请求？
request header 和 response header如何处理？
遇到页面重定向、要求登录如何处理？
如何维护html缓存，包括其header部分、body部分？
在html intercept过程，做缓存读取、加载

实现native端代理请求html内容，还有一个好处：从WebView.loadUrl(url)开始，实际要先加载WebView内核后才会真正的发起html请求。

如果native端实现代理发送html请求，则可以将WebView内核加载与发送请求html，两个过程并行起来。在调用WebView.loadUrl(url)同时或之前，发起html请求。这就至少节约了WebView内核加载的这段时间（约100ms～250ms）。

2. native端代理html请求

Android端具体的实现，我们直接看示意代码。这里使用了OkHttp作为网络请求库。

// 定制request header
Map<String, String> requestHeader = new HashMap<>();  
requestHeader.put("method", "GET");  
requestHeader.put("Host", mHtmlUrl.getUri().getHost()); // mHtmlUrl就是html的链接  
requestHeader.put("Accept", "text/html");  
requestHeader.put("Accept-Encoding", "gzip"); // 注意这里，如果html body以gzip的方式返回,后面读取的时候要解压缩  
requestHeader.put("Accept-Language", "zh-CN,zh;");

// 设置cookie和ua这两步最为重要，大部分后台服务器需要根据这两个参数获取信息、作跳转等
requestHeader.put("Cookie", "xxx");  
requestHeader.put("User-Agent", "xxx");  
// 构建OkHttpClient
OkHttpClient okHttpClient = new OkHttpClient.Builder()  
                    .followRedirects(false) // 不follow重定向
                    .followSslRedirects(false)
                    .connectTimeout(15, TimeUnit.SECONDS)
                    .build();
Call call = okHttpClient.newCall(request);  
Response response = call.execute();  
// 获得response headers
Headers headers = response.headers();

// 获取html body的网络输入流
InputStream byteStream = mResponseBody.byteStream();

String contentEncoding = headers.get("Content-Encoding");  
if ("gzip".equalsIgnoreCase(contentEncoding)) {  
    // 如果html body是gzip压缩，则解压
    inputStream = new BufferedInputStream(new GZIPInputStream(byteStream));
} else {
    inputStream = new BufferedInputStream(byteStream);
}
// 最终拿到了html body的inputStream供读取

iOS 端仍然是通过 NSURLProtocol 代替 Webview 请求 HTML。

3. `request header`和`response header`的处理

html的内容能否正确的获取、加载，request header和response header必须要处理无误。

request header

这里最重要的是Cookie及User-Agent参数，Cookie可以通过CookieManager从WebView读取; 而User-Agent通过WebSettings.getDefaultUserAgent()读取再附加上自己的ua值即可。

后台系统一般都会从Cookie中读取身份、session等信息;

有赞的前端体系中User-Agent的设置非常重要，会根据UA的值确定是跳转到PC端的网页还是H5。

response header

response header中包括Set-Cookie及CSP等重要响应头信息。response header和html body的内容必须一起被加载到WebView中。

在Android中，WebViewClient.shouldInterceptRequest(view, url)返回的WebResourceResponse提供了

void setResponseHeaders (Map<String, String> headers)

方法设置响应头（注意这个接口从api level>=21才提供）。

在我的测试中，通过这个接口设置的响应头，Set-Cookie似乎一直没有生效，所以我们还是采用了CookieManager来手动设置：

List<String> cookies = headers.toMultimap().get("Set-Cookie"); // headers即从`OkHttp`返回response header对象  
CookieSyncManager.createInstance(context); // 这句一定得调，否则在一些低端机型上有莫名崩溃  
CookieManager cookieManager = CookieManager.getInstance();  
cookieManager.setAcceptCookie(true);  
for (String cookie : cookies) {  
    cookieManager.setCookie(url, cookie);
}

// 另注：上述设置response cookie的代码不能在shouldInterceptRequest中调用，需要异步化。
// 参考：https://issuetracker.google.com/issues/36989494#c8

在 iOS 中，Request Header 可以从 NSUserDefault 中读取，另外再拼上自定义的请求头即可。而 Response Header 则在 NSURLProtocol 代替 WebView 请求的过程中可以拦截到。响应头的使用又可分为两种。