移动开发中的Web：WebView、WebKit、JSCore、Web 优化、热修复、跨平台……

由于 Web 页面内请求流程不可控以及网络环境的影响，对于 Web 的加载来说，网络请求一直是优化的重点。开发者较为常用的做法是使用 Native 并行代理数据请求，替代 Web 内核的资源加载。在客户端初始化页面的同时，并行开始网络请求数据;当 Web 页面渲染时向 Native 获取其代理请求的数据。

而将并行加载和预加载做到极致的优化，就是离线包的使用。将常用的需要下载资源(HTML 模板、JS 文件、CSS 文件与占位图片)打包，App 选择合适的时机全部下载到本地，当 Web 页面渲染时向 Native 获取其数据。

通过离线包的使用，Web 页面可以并行(提前)加载页面资源，同时摆脱了网络的影响，提高了页面的加载速度和成功率。当然离线包作为资源动态更新的一个方式，合理的下载时机、增量更新、加密和校验等方面都是需要进行设计和思考的方向，后文会简单介绍。

复杂 Dom 节点 Native 化实现

当并行请求资源，客户端代理数据请求的技术方案逐渐成熟时，由于 WKWebView 的限制，开发者不得不面对业务调整和适配。其中保留原有代理逻辑、采用 LocalServer 的方式最为普遍。但是由于 WKWebView 的进程间通信、LocalServer Socket 建立与连接、资源的重复编解码都影响了代理请求的效率。

所以对于一些资讯类 App，通常采用 Dom 节点占位、Native 渲染实现的方式进行优化，如图片、地图、音视频等模块。这样不但能减少通信和请求的建立、提供更加友好的交互、也能并行地进行 View 的渲染和处理，同时减少 Web 页面的业务逻辑。

HybridPageKit 中就提供封装好的功能框架，开发者可以简单的替换 Dom 节点为 NativeView。

按优先级划分业务逻辑

从 App 的维度上看，一个 Web 页面从入口点击到渲染完成，或多或少都会有 Native 的业务逻辑并行执行。所以这个角度的优化关键渲染路径，就是优先保证 WebView 以及其它在首屏直接展示的 Native 模块优先渲染，所以承载 Web 页面的 Native 容器，可以根据业务逻辑的优先级，在保证 WebView 模块展示之后，选择合适的时机进行数据加载、视图渲染等。这样就能保证在 Native 的维度上，关键路径优先渲染。

4. 优化整体流程

整体上对于客户端来说，我们可以从 Native 维度(容器和数据加载)以及 Web 维度两个方向提升加载速度，按照页面的加载流程，整体的优化方向如下：

iOS 中 Web 相关延伸业务

1. 模板引擎

为了并行加载数据以及并行处理复杂的展示逻辑，对于非直出类型的 Web 页面，绝大部分 App 都采用数据和模板分离下发的方式。而这样的技术架构，导致在客户端内需要增加替换对应 DSL 的模板标签，形成最终的 HTML 业务逻辑。简单的字符串替换逻辑不但低效，还无法做到合理的组件化管理，以及组件合理地与 Native 交互，而模板引擎相关技术会使这种逻辑和表现分离的业务场景实现得更加简洁和优雅。

基于模板引擎与数据分离，客户端可以根据数据并行创建子业务模块，同时在子业务模块中处理和 Native 交互的部分，如图片裁剪适配、点击跳转等，生成 HTML 代码片段，之后基于模板进行替换生成完整的页面。这样不但减少了大量的字符串替换逻辑，同时业务也得到了合理拆分。

模板引擎的本质就是字符串的解析和替换拼接，在 Web 端不同的使用场景有很多不同语法的引擎类型，而在客户端较为流行的，有使用较为复杂的 MGTemplateEngine，它类似于 Smarty，支持部分模板逻辑。也有基于 mustache，Logic-less 的 GRMustache 可供选择。

2. 资源动态更新和管理

无论是离线包、本地注入的 JS、CSS 文件，还是本地化 Web 中的默认图片，目的都是通过提前下载，替换网络请求为本地读取来优化 Web 的加载体验和成功率，而对于这些资源的管理，开发者需要从下载与更新，以及 Web 中的访问这两个方面进行设计优化。

下载与更新

• 下载与重试：对于资源或是离线包的下载，选择合适的时机、失败重载时机、失败重载次数都要根据业务灵活调整。通常为了增加成功率和及时更新，在冷启动、前后台切换、关键的操作节点，或者采用定时轮循的方式，都需要进行资源版本号或 MD5 的判断，用以触发下载逻辑。当然对于服务端来说，合理的灰度控制，也是保证业务稳定的重要途径。
• 签名校验：对于动态下载的资源，我们都需要将原文件的签名进行校验，防止在传输过程中被篡改。对于单项加密的办法就是双端对数据进行 MD5 的加密，之后客户端校验 MD5 是否符合预期;而双向加密可以采用 DES 等加密算法，客户端使用公钥对资源验证使用。
• 增量更新：为了减少资源和离线包的重复下载，业内大部分使用离线包的场景都采用了增量更新的方式。即客户端在触发请求资源时，带上本地已存在资源的标示，服务端根据标示和最新资源做对比，之后只提供新增或修改的 Patch 供客户端下载。

基于 LocalServer 的访问

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!