WebView 秒开方案探索

文：元芳

移动端加载网页介绍

当我们加载一个网页时，并不是发送一个 url 请求所有的内容都下载下来了，而是除了主 URL 请求外，还有其他很多的请求，比如 JS、CSS、图片等文件，每一个都是独立的请求，部分请求还是串行的，需要将这些资源文件下载完成后才能渲染 。

移动端使用 WebVeiw 加载现状

移动端使用 WebView 影响用户体验，主要就是加载时间过长（发的请求比较多），造成显示空白页面过久，这就反应到下面 webview 加载的过程中-加载时间久长，主要包括以下三步：

• WebView 的初始化

• 下载 HTML 并解析 c

• css、js 资源的下载和渲染

如何减少这三大步骤中的耗时，成为了研究的重点。

WebView 加载过程

以社区咨询页面为例在 4G 网络条件较好的情况下，随机取五组数据，得下图，html 请求时间平均 506ms,请求 js、css 的时间 783ms，这个不包括图片请求的时间。

请求例子：比如我使用 WebView 加载了一个请求 https://h5plus.dewu.com/post?postsId=66902177&477zitijianju=0

从 chales 抓包的请求瀑布流可以看到加载 WebView 的 url 时，先请求到 html 以后，通过解析，才去加载 css、jss 等一些资源，同时也可以看到加载一个 WebView 页面，除了一个主 HTML 的 URL 以外，css、js 的请求发送了 7 个请求，这还是一个不太复杂的 webview 页面，如果过于复杂，可想而知请求的数量。如何减少 css、js 请求也是 H5 端优化的方式之一。而对于客户端而言，同样通过提前把 js、css 一些资源放在本地，也可以优化 WebView 的加载速度。

WebView 加载 HTML 方式

通过服务器,以 url 的形式返回

这种也是传统的加载方式，弊端就是网络不好的情况下，会出现较长时间的白屏，用户体验不好 。加载本地的 html 模板，通过本地注入内容的方式这种方式，是大多数公司研究的重点，可以实现 WebView 秒开，比如头条的新闻详情页，适用于不太关注实时变化的页面，几乎感受不到白屏，能达到原生的体验，原理就是提前把所需的 js、css、html 模板下载到本地，提前渲染好 WebView，只需打开时，客户端注入内容数据即可，极大的提高了 WebView 的加载速度，这个也是本文研究的重点。 直接加载带标签的字符串（以富文本的方式加载） 这中方案适用于简单、纯展示的 UI 界面，实现比价简单，功能比较单一。

得物社区咨询页面现状

目前社区咨询专栏页面，页面上半部分使用的是 WebView，下半部分是原生的评论页面，加载 WebView 的方式也是传统的通过 url 加载的方式，用户体验不是很好，平均打开一个页面需要 2s 左右，为了提升用户体验，减少 WebView 的加载耗时，对 WebView 的优化做了调研。

最终通过调研和方案对比，客户端选用了调研了加载本地的 html 模板，通过注入内容的方式加载 WebView 页面。

由于在社区咨询页面加载列表的时候，都已经拿到了渲染 webview 的内容数据，因此点击进入咨询详情页的时候，其实内容数据也在本地了，相当于减少 WebView 发送请求的个数，把 js、css 的数据以及 html 模板提前放到本地，通过 file 协议，提前加载，当打开 WebView 时，直接把内容注入本地 HTML 模板，极大节省了 WebView 请求和加载的时间。

最终的 WebView 加载请求示意图如上图所示，省去了中间 html、css、js 请求的时间，通过加载离线本地的方式，大大提高了速度，本地加载 html、css、js 的时间可以忽略不计。

离线包下载逻辑：

无法复制加载中的内容

获取注入的内容数据的方式：

1. 如果列表已经有了内容数据，进入 WebView 无需再发送请求，可以直接把内容数据注入本地的 html 模板

2. 如果列表没有内容数据，进入 WebView 根据不同的内容，请求不同的 URL 获取内容数据，然后注入本地的 html 模板

最终以 demo 的形式使用 chales 模拟 4G 网络条件优化前后的对比效果如下：

优化前

📎4G 优化前咨询专栏.mp4

优化后

📎4G 优化后咨询专栏.mp4

优化前后的数据对比，就 demo 而言;WebView 加载到渲染结束的时间对比如下

由上图数据可以明显的看到，WebView 从加载到渲染结束，提高幅度达到了 98%左右，优化效果还是很明显的。

接下来咱们再细化分 WebView 各个阶段的请求时间：css、js 资源网络请求的时间

html 网络请求时间

由于 css、js 还有 html 模板都可以以离线资源的形式，提前放在本地，所以请求资源的时间都可以省了，这样的话，就会大大减少 WebView 加载过程中的时间。

并且图片的加载时间也有明显的提升，相关数据如下，这个提高幅度也是非常客观的。

对于技术而言，优化无止境，一直在路上，目前还处于 demo 阶段，下阶段我们会按照方案实施，优先优化社区的咨询专栏详情页，具体效果如何，大家拭目以待吧。