基于 prefetch 的 H5 离线包方案

文章预览

点击上方  前端Q ，关注公众号 回复 加群 ，加入前端Q技术交流群 前言 对于电商 APP 来讲，使用 H5 技术开发的页面占比很高。由于 H5 加载速度非常依赖网络环境，所以为了提高用户体验，针对 H5 加载速度的优化非常重要。 离线包 是最常用的优化技术，通过提前下载 H5 渲染需要的 HTML/JS/CSS 资源，加载时直接使用本地缓存资源避免额外的网络请求提高加载速度。本文主要是介绍团队在离线包技术方案上的探索，以及基于 prefetch 的离线包实现方案如何减少维护成本和开发成本。 现有方案 离线包技术发展到现在已经比较成熟。离线包技术主要是分为两部分，一部分是客户端离线包容器，另一部分是线上离线包平台。 离线包容器 资源请求拦截 - 拦截 H5 资源请求，当存在本地缓存资源时直接返回使用 资源缓存 - 资源下载、资源缓存策略、增量更新 ………………………………