乐趣区

关于前端:WebView秒开方案探索

jiezi

文：元芳

挪动端加载网页介绍

当咱们加载一个网页时，并不是发送一个 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?…

从 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 阶段，下阶段咱们会依照计划施行，优先优化社区的征询专栏详情页，具体成果如何，大家刮目相待吧。

退出移动版