App内网页启动加速实践：静态资源预加载视角

摘要

App应用的功能代码，通常在用户访问之前，就已经以安装包的形式，通过应用市场下载安装好了。而网页应用的功能代码（静态资源），则是在用户实际点击访问时，才实时下载运行。

这一『用时下载』的特点是一把双刃剑，既带来了实时更新的灵活性，也造成了应用启动的延迟，导致网页应用启动速度远远落后于App应用，造成交互体验和用户转化短板。

本文提出一种基于静态资源预加载技术，提升App内网页启动速度的新方案。根据线上项目实践数据，此方案可显著提升网页启动速度（缩短页面加载时间30%-50%以上）、提高网页加载成功率。相比于传统的离线化技术方案，本方案具有差异性优势，且能规避iOS WKWebview中无法拦截请求的问题。

1 背景和问题

在App应用开发中，网页应用（又名H5/WebApp/Hybrid等）以其跨平台/跨App、开发成本低、迭代试错速度快的特点，始终占有一席之地。

然而，在上述优势之外，网页应用启动速度慢（尤其是用户首次访问时）、点击转化率低等问题，使其难以进入核心业务技术选型。

下面我们以微信内的一个页面为例，从一个普通用户视角，感受一下网页应用的启动过程。

图1：用户视角的网页启动过程

然后从技术视角，分析一下网页启动的几个关键耗时阶段。

图2：技术视角的网页启动过程

（注：上述数据根据线下测试数据及部分线上项目TP95用户数据得出，仅用于说明占比趋势，不同项目会有一定差异）

从图中可知，静态资源下载是最大的耗时环节，那么，如何解决这一耗时瓶颈？

调研发现，针对静态资源下载慢的问题，业界常规的解决方案是链接预取（link prefetching）。

链接预取是一种浏览器机制，其利用浏览器空闲时间来提前下载用户在不久的将来可能访问的文档。其主要实现思路是：

网页向浏览器提供一组预取提示，在完成当前页面加载后，浏览器按照预取提示，开始静默地下载指定的文档，并将其存储在浏览器缓存中

当用户访问预取文档时，便可以快速从浏览器缓存中读取

链接预取属于预加载技术，已成为Web事实标准的一部分

链接预取已在前端项目中广泛应用，在各类构建工具中均有默认实现。

在用户进入网页应用首页之后，链接预取能加速后续页面的访问速度，而对于网页应用首页本身的访问加速，链接预取则显得无能为力。

因为链接预取需要一个前置页面来设置预取提示，而网页应用首页通常是用户访问的起点，不存在这样的前置页面。

2 App内网页静态资源预加载

2.1 App内网页特点和预加载问题

图3 App内导航类Native页面示例

回到App场景内，App内的网页应用，入口一般投放在导航类/频道类Native页面，用户点击入口图标后启动WebView组件展示。

Native页面是网页应用首页的前置页面，这就给了我们一个很好的预加载首页时机：可以在Native页面中去预加载网页应用首页，从而提高网页应用首页的启动速度。

要实现这一机制，需要解决如下问题：

如何在Native页面下载Web网页静态资源，并放入缓存区？

Web网页打开时，如何命中上述缓存？

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h63586.shtml