Optimizing H5 Performance in Mobile Apps: Caching Strategies and Implementation

一、背景 在 App 的开发过程中，随着业务的发展，越来越多的公司会选择内嵌 H5，但是 H5 的性能却有着很大的问题，备受争议。作为移动开发者应该从哪些方面去优化 H5 是一个很值得研究的话题。 达达骑士 APP 目前内嵌的网页大概有 260+，高频页面 PV 达到日均数十万，功能复杂页面的加载耗时也达到了2s+，对骑士的直观感受和配送效率有着严重的影响。 二、方案选择 在考虑如何优化 H5 网页加载速度之前，我简单了解下 H5 是如何加载和渲染的。 移动页面白屏时间 = 无反馈阶段 + 白屏阶段（资源加载、首次渲染、JS执行） 由此可以看出我们优化的重点可以放在 H5 的预加载和缩短白屏时间上，对此我们可以很容易想到以下方案。 1. 模板优化（拆分、预热、复用） 2. CDN 加速 3. webview 预创建和复用 4. （JS、CSS、图片）本地缓存复用 方案二已经在使用，考虑达达骑士的业务和服务端、前端现有的整体架构，目前可以从第3和第4点来做重点优化。 对于第4点本地缓存复用还有以下两种可选方案 方案一：App 端 H5 离线包下载解压，后续直接加载本地资源 方案二：第一次渲染下载资源到本地后续直接复用，后续相同请求拦截直接拿本地资源 两个方案优缺点对比 出于投入产出比考虑，最终使用方案二，让一些高频使用的页面平均加载时长快速缩短，从原来的平均 2s+ 缩短到 1s+。 三、具体方案实施 1. webview 预创建和复用 2. （JS、CSS、图片）本地缓存复用 3. iOS 注意问题 4. 上线灰度和降级方案 5. 线上收益 6. 未来规划和总结