webview优化

[MJingv]

hybrid h5-webview

页面渲染过程：

• dom下载，dom解析
• css请求+下载，css解析
• 渲染
• 绘制
• 合成（gpu处理）

webview页面启动和加载过程

1. webview初始化 （无反馈）
2. 建立连接（白屏）
3. 接受页面（白屏）
4. 脚本下载解析/执行（白屏）
5. 后端处理（loading）
6. 接受数据（loading）
7. 渲染（loading）

webview初始化

• 首次初始化时间： 客户端冷启动后，第一次打开webview，新建webview到开始建立网络连接之间的时间
• 二次初始化时间：开始创建webview到建立网络连接之间的时间（android后台会开启webview进程）

问题：native中，客户端需要初始化webview后，才开始加载。

优化方案

2个思路

• 预先初始化webview
• 初始化同时通过native完成网络请求

全局webview

• native刚启动就初始化一个全局webviw待用
• 当用户访问了webview，直接用全局webview加载对应页面
• 弊端：额外内存消耗。页面跳转需清空上一个页面痕迹，更容易内存泄露

客户端代理数据请求

• 客户端初始化webview同时直接由native开始网络请求数据
• 当页面初始化完成，向native获取代理请求数据

建立连接/服务器处理优化

• dns采用和客户端api相同域名，直接使用缓存的dns不再发起请求图片
• 后端http协议采用chunk编码，header里设置 transfer-encoding:chunked是的页面可以分块输出，优先输出静态部分。

[MJingv]

优化webview其他方案总结：

• 容器预加载/复用：节约创建webview时间
• 离线化存储：将资源or接口数据存在移动端，减少接口请求时间
• 数据预请求
• ssr：document由服务端/cdn下发。在document请求时直接拿绘制好的dom返回
• esr，前端cdn类似ssr事情