Hybrid App 离线包方案实践

Posted 2022-06-07 xiangzhihong8

一、背景

在 H5 + Native 的混合开发模式中，让人诟病最多的恐怕就是加载 H5 页面过程中的白屏问题了,下面这张图描述了从 WebView 初始化到 H5 页面最终渲染的整个过程。

可以看到，一个完整的WebView加载流程：

1. 初始化webview；
2. 建立连接，从后端下载开启WebView需要的相关文件数据包，包括网页中需要请求的文件以及模板html；
3. 加载与接受数据，页面的渲染，并通过实现android和js的交互

基于此，目前主流的优化方式主要包括：

• 针对 WebView 初始化：该过程大致需耗费 70~700ms。当客户端刚启动时，可以先提前初始化一个全局的 WebView 待用并隐藏，当用户访问了 WebView 时，直接使用这个 WebView 加载对应网页并展示。
• 针对向后端发送接口请求：在客户端初始化 WebView 的同时，直接由 Native 开始网络请求数据，当页面初始化完成后，向 Native 获取其代理请求的数据。
• 针对单页面加载的JS动态拼接 Html：采用多页面打包， 服务端渲染，以及构建时预渲染等方式。
• 针对加载页面资源的大小：可采用懒加载等方式，将需要较大资源的部分分离出来，等整体页面渲染完成后再异步请求分离出来的资源