一、背景
H5页面一般托管在APP中的WebView中，页面性能非常依赖网络环境。 通过离线打包方案，我们致力于以较低的兼容成本弱化网络对页面性能的影响，同时保留H5本身的优势。
离线打包通过将页面资源（包括HTML、JS、CSS）打包成压缩包，预先下载APP到本地，直接从本地WebView加载静态资源，减少网络环境对页面加载的影响。 离线包重点解决构建链接->接受页面/样式/脚本的蓝屏过程。
后端项目可以通过离线包插件将页面资源压缩成压缩包，上传到离线包配置平台，通过配置平台管理相关应用，进行部署、发布、查看等操作。
LOFTERAPP中有很多H5应用，比如商城、专家认证、客服留言等，我们希望通过线下套餐的方案，更快的将页面展现给用户，提升用户体验。 这类应用整体比较稳定，要求比较合适通过某种方法访问离线包的能力，我们的解决方案也是为此目的而设计和实现的。
2、线下套餐整体解决方案
总体方案设计如下：
图：整体解决方案工作流程
后端应用（Web）维持原有的开发部署流程，仅通过webpackplugin改变打包流程，与配置平台建立连接，生成压缩文件，上传至NOS。 这使得现有的H5应用可以轻松具备离线打包的能力，后续新开发的离线应用也可以同时具备静态发布的能力。
离线包配置平台（ConfigurationPlatform）用于管理每个离线包应用，包括添加、删除、修改和检查应用、版本管理、配置查看、设置检查更新的url等。webpackplugin生成的配置将通过存储插座。 每个版本更新也会被存储，并通过在线操作生效。
APP前端（APPServer）主要提供APP端离线包配置查询的socket，同时还包括针对ios和android启用或禁用离线包的开关。 配置平台上已设置生效的离线包应用会以列表形式提供给APP。
客户端（APP）通过socket获取离线包列表。 如果需要更新应用版本，请先删除本地包资源，然后再更新。 通过整体审查，目前我们还没有做增量更新和差异包维护。 为了减少应用量过大带来的更新问题，我们提供了包发送的配置，可以分步离线实现。 在启用了离线包功能的WebView中，所有的资源请求都是反向代理的。 如果资源有本地缓存，则去本地缓存，如果没有，则请求线上资源。 客户端检测配置更新的时机主要是： 1、启动时拉取完整的离线包应用配置； 2. 当点击平台配置检测更新的url时。
2.1 离线包应用配置列表
清单示例如下：
[
{
"appId": "离线包应用appId",
"name": "离线包应用名",
"version": "离线包应用版本",
"updateTime":"离线包应用配置项更新时间，可用于判断是否需要覆盖配置项",
"refreshUrls":["www.lofter.com/mp/lofter878789/html/page1.html"],
"packages": [
{
"packageName":"package_1",
"loadingQuietly":true,
"dependencies":["common trunk包"],
"urls": [
"//www.lofter.com/market/page1.html",
"//www.lofter/market/page2.html"
],
"zipUrl": "https://xxx.nosdn.127.net/offline/xxxx.zip",
"md5":"xxxxxxxxxxxxxxxx"
},{
"packageName":" package_2",
"dependencies":["common trunk包"],
"urls": [
"//www.lofter.com/market/page3.html",
"//www.lofter/market/page4.html"
],
"zipUrl": "https://xxx.nosdn.127.net/offline/xxxx.zip",
"md5":"xxxxxxxxxxxxxxxx"
},{
"packageName":"common trunk包",
"loadingQuietly":true,
"zipUrl": "https://xxx.nosdn.127.net/offline/xxxx.zip",
"md5":"xxxxxxxxxxxxxxxx"
}
]
}
]主要配置项说明：
2.2 离线包插件
离线包插件工作流程如下：
图：离线包插件工作流程
webpack生成输出文件之前，根据资源信息生成映射文件manifest.json，将资源包上传到NOS供APP下载，并将离线包应用相关信息program.json提交到离线包配置平台。 也通过配置提供包传递，未配置的资源将被手动分包。 这里还提供了附加静态资源的配置。 如果页面需要高优先级导入第三方资源，可以在本地保存一份，并将访问链接与该资源关联起来供插件读取jquery离线手册，这样可以防止此类资源请求。 持续时间对页面加载有影响。
使用方法是：
const OfflinePackage = require('lofter-mp-webpack-plugin');
const offlineEntry = getEntry();
module.exports = {
...
plugins: [
new HtmlWebpackPlugin(),
new OfflinePackage({
packageNameValue: 'test',
appId: 'lofter1',
uploadConfigUrl: 'http://www.lofter.com/mp/api/appVersion/add',
baseUrl: `//www.lofter.com/mp/lofter1/`,
cdnUrl: `//xx.cdn.com/mp/lofter1/`,
nosConfig: nosConfig,
ignoreFileTypes: ['txt', 'js.map'],
excludeFileName: ['page2'],
entry: offlineEntry,
extraManifest: {
"static/jquery.min.js": "//cdn.bootcss.com/jquery/2.2.4/jquery.min.js",
},
dividePackageConfig: [{
loadingQuietly: true,
entryFile: ['index'],
},{
loadingQuietly: false,
entryFile: ['page1'],
}]
})
]
}需要在HtmlWebpackPlugin之后进行配置，才能直接获取处理后的资源。
2.3 客户端实现
Android生成了离线包SDK，WebView注册该SDK具备资源拦截能力，通过覆盖shouldInterceptRequest方法拦截WebView资源地址，将需要拦截的url与已有的离线包进行匹配，如果有不匹配，则不会拦截，直接访问远程资源，否则代理WebView的资源获取方法。 从远程CDN下载包含静态资源的压缩包后，无需解压，可以直接读取包中的文件。
IOS目前使用NSURLProtocol来拦截WKWebView网络请求，会造成POST请求体丢失的问题。 通过注入hookjs代码，我们将对fetch和XMLHttpRequest进行一些处理。 在实际联调中，我们也完成了 headers，实现了一个简单的同源策略。 这里我们还是在寻找更好的实现方案，否则随着业务复杂度的增加，在客户端实现复杂的自定义浏览器是不可避免的。
使用app验证离线包功能时，仅通过抓包很难有效判断资源加载状态。 这里，Android的朋友提供一个日志筛选工具。 连接手机后，可以在笔记本上查看离线包拦截日志。 iOS 的 debug 浮层还添加了离线包资源匹配的日志。 据悉，我们已经同意收集Web日志的JSBridge，Web会通过主动调用方法将其添加到App的日志文件中，方便排查问题。
3、线下套餐疗效统计
下面我们分析一下乐湖市场应用的效果。 乐虎市场是一款多页面H5应用，网站用户数量较多。 功能上线后即可观察到页面性能指标的变化。 客户端WebView容器在6.11.1版本上线了离线打包功能，我们选取6.10.0到6.10.3的所有版本进行对比。 首先统计平均DNS时长、平均TCP时长、平均DomReady时间、平均加载时间四个指标。
这是该指标的估算方法，由wapm的sdk收集并上报。
指数估算法
DNS持续时间
域查找结束 - 域查找开始
TCP 持续时间（包括 SSL 持续时间）
连接结束-连接开始
DOM 就绪
domContentLoadedEventEnd-fetchStart
页面完全加载时间
loadEventStart-fetchStart
统计结果整理如下：
图：市场主页面使用离线包的性能指标统计，包括统计的版本、样本数量、结果对比等。
经过图形处理后，得到比率堆积统计图：
图：市场主页业绩指标占比堆积统计图
可以看到，两端的DNS时长和TCP时长均显着增加。 DomReady 和加载时间也有所增加，Android 整体平均下降了 30%。 需要注意的是，首页的HTML部分是SSR，而且目前使用的是线上资源，因此虽然数据有所增长，但与其他页面相比，前两项指标并不接近0。
对于大多数通过异步套接字获取主要数据的页面来说，虽然使用WebVitals指标可以更好地展现用户端的真实体验（WebVitals介绍门户）。 通过数据收集和分析，离线包可以有效减少FCP（首次内容渲染）和LCP（最大内容渲染）的持续时间，并且对CLS（累积布局位移）和FID（首次输入流）影响较小。 由于目前基于Chromium内核的浏览器都可以采集WebVitals指标，因此这里仅展示Android端的数据。
图：Android端使用离线包的WebVitals指标统计jquery离线手册，基于数据区间的统计及结果对比
经过图形处理后，得到条形图：
图：Android市场主页使用离线包的WebVitals指标条形图
可以看到，离线包对FCP和LCP进行了显着的优化。 从表中可以看出，P95统计中离线包的绝对值优化大多低于P75数据，这说明它可以增加整体数据的波动性，并且对部分用户的体验优化缓慢加载会更有效。
4、离线包加载分析
根据统计结果，通过WebView本地加载静态资源可以提高多项性能指标，并且将主要静态资源切换到本地加载可以大幅减少DNS和TCP的持续时间，符合预期。 DomReady 和页面加载完成时间的提升超出了我们的预期。 这里我们使用debug模式来分析离线包应用加载时页面的执行情况，并对比非离线包模式，看看时间是如何节省的。
由于Android端的数据相对稳定，因此本次我们首先重点分析Android WebView的离线应用，并选取具有代表性的首页和业务详情页作为示例。
设备为华为荣耀9，Android9，运行显存为6GB，处理器为海思麒麟960，网络环境：移动4G，使用性能模块对连接的手机进行加载分析。
自己开发的jquery表单验证控件！ 它易于使用、风格美观且完全开源。 你就知道效果好不好！ 插件名称：jquery表单验证插件V1.0 插件作者：zy8008 最后更新：2011-4-28 插件说明：datatype 类型说明：------------- -------- ------------------*: 必填jquery表单验证插件，可以是任意字符 number: 数字 zip: 邮政编码 mobile: 手机号码 email: 邮箱ajax ：异步远程验证，必须添加ajaxurl 需要验证的属性和数组留空如：reg：正则验证，必须添加reg属性如：checkbox：复选框验证 radiobox：单选框验证 在前台添加属性说明： -- ---------- ----------------------------------datatype：需要数据验证type，看里面的描述 errmsg：可选的错误信息，验证失败信息，如果不设置或者为空jquery表单验证插件，验证框会显示“验证失败！” tip：验证前可选的提示信息，如果不设置或为空，提示框将被隐藏。allowblank：可选值为“true|false”，默认为true允许为空。 如果设置为true，则该值为空时也能通过验证。 对 *、ajax、checkbox、radiobox、reg 无效 reg：正则表达式规则，仅当 datatype 为 reg 时，否则无效 ajaxurl：异步远程验证 url，仅当 datatype 为 ajax 时才能使用，否则无效是无效的。 验证后的数组会放在url末尾，并留空，如test.asp?uname=调用描述：-------------------- -------- ---------------------$(文档).ready(function(){$("#aspnetForm").valideform( {isokhide:true,btnsubmit:" #bbb"})});#aspnetForm：需要验证的表单ID，也可以使用jquery选择器自己定义isokhid：可选值为“true|false” " 并且默认为 false。 点击提交按钮时，如果通过验证的 Items 会隐藏验证提示框 btnsubmit：可选 指定绑定提交风暴的控件 ID，如普通按钮或超链接，在表单中提交仍然有效其他具体使用方法请参考demo文件！
