混合APP 优化加速方案

文/田江涛

1 现有方案的问题

混合APP 现有技术主要存在着如下的缺陷：

每次访问应用都需要重新请求下载整个HTML5 网页、CSS 样式、JavaScript 脚本、图片及视频等资源，但是如果服务器端没有更新资源，那么每次请求和返回的资源都会相同，这不仅造成了网络流量的浪费，占用了大量的服务端资源，而且下载资源往往有网络延迟从而影响了用户体验和感知。

当请求访问新页面时需要等待资源下载后，混合APP 才能解析资源后再加载展示，可能等待时间较长。

2 优化方案

本方案提出了一种混合APP 加速方法和装置，主要思路是对混合APP 所需的HTML5网页、CSS 样式、JavaScript 脚本等文件资源全部进行模版化，所有需要动态更新数据的部分均以占位符替代，混合APP 新增内置的模版解析模块，自动按模版对文件资源进行解析并使用最新数据替换。服务端计算并记录所有模版文件资源的唯一散列值标识，供比对是否是最新文件时使用，如果文件内容有更新，则散列值改变。混合APP 中新增加速渲染引擎模块，首次请求访问时，下载并缓存整个HTML5 网 页、CSS 样 式、JavaScript 脚 本、图片及视频等资源，再次访问时首先检查本地是否有文件资源缓存，如果有则计算文件资源散列值，并与服务端文件资源散列值对比，若散列值一致则直接从本地加载并解析文件，即提供本地Web 服务，不再从服务端下载文件，仅从服务端获取数据，并调用混合APP内置模版解析模块将占位符替换数据再加载到WebView 展示给用户，服务端由传统的提供文件下载解析服务的角色转变为本方案的提供数据服务的角色，这样再次访问时可以避免文件资源下载耗费大量的时间，如果不存在文件资源或因服务端Web 版本更新出现散列值不一致，则从服务端下载最新文件资源后重复上述过程进行加载展示。

混合APP 加速方法和装置的工作流程如下：

步骤1 用户在移动终端启动混合APP 首次访问HTML5 网页等资源，加速渲染引擎模块检测到本地没有缓存资源，从服务端下载并缓存整个HTML5 网页、CSS 样式、JavaScript脚本、图片及视频等资源，并记录资源散列值。

步骤2 混合APP 模版解析模块对文件资源按照预定规则进行解析，将其中的占位符替换为具体数据内容并写入文件。

步骤3 混合APP 从本地加载解析后的文件通过WebView 等控件展示给用户。

步骤4 用户再次访问混合APP 的HTML5网页等资源，加速渲染引擎模块检测到本地存在缓存资源，获取资源散列值，然后询问服务端对应资源的散列值，如果散列值一致，说明文件资源没有更新，可以直接从本地读取模版并获取服务端数据内容后加载显示，否则下载新的文件资源，更新记录资源的散列值。

步骤5 如果用户手工删除本地缓存资源，则重新从服务端获取文件资源和数据，重复上述步骤。

步骤6 用户访问结束，退出混合APP，否则访问新资源。

3 结语

对混合APP 所需的HTML5 网页、CSS样式、JavaScript 脚本等文件资源全部进行模版化，所有需要动态更新数据的部分均以占位符替代，混合APP 新增内置的模版解析模块，自动按模版对文件资源进行解析并使用最新数据替换。服务端计算并记录所有模版文件资源的唯一散列值标识，供比对是否是最新文件时使用，如果文件内容有更新，则散列值改变。以上是本方案的技术创新，应予以保护。

混合APP 中新增加速渲染引擎模块，首次请求访问时，下载并缓存整个HTML5 网页、CSS 样式、JavaScript 脚本、图片及视频等资源，再次访问时首先检查本地是否有文件资源缓存，如果有则计算文件资源散列值，并与服务端文件资源散列值对比，若散列值一致则直接从本地加载并解析文件，即提供本地Web 服务，不再从服务端下载文件，仅从服务端获取数据，并调用混合APP 内置模版解析模块将占位符替换数据再加载到WebView 展示给用户，服务端由传统的提供文件下载解析服务的角色转变为本方案的提供数据服务的角色，这样再次访问时可以避免文件资源下载耗费大量的时间，如果不存在文件资源或因服务端Web版本更新出现散列值不一致，则从服务端下载最新文件资源后重复上述过程进行加载展示。