前端/移动开发面试题更新 2026-08-05

请描述 HTML5 离线存储的使用方法和工作原理。

前端/移动开发技术原理HTML5

考察说明

考查对 HTML5 离线存储(Application Cache)的基本使用和机制理解。

回答思路

  1. 【回答框架 1】离线存储主要通过 manifest 文件实现,在 HTML 标签的 manifest 属性中引用一个 .appcache 文件。该文件列出需要缓存的文件、不缓存的文件和回退文件。
  2. 【回答框架 2】工作原理是浏览器首次访问时下载并缓存清单中列出的资源,之后在离线状态下从缓存加载。manifest 文件变化时,浏览器会更新缓存。
  3. 【回答框架 3】使用时需注意 manifest 文件的 MIME 类型、缓存更新机制和浏览器缓存限制。
  4. 【关键点 1】使用 manifest 属性声明缓存清单
  5. 【关键点 2】缓存清单包含 CACHE、NETWORK、FALLBACK 三个部分
  6. 【关键点 3】浏览器在在线时也会优先使用缓存副本,更新需修改 manifest 文件
  7. 【易错点 1】不要把需要实时更新的资源放入缓存
  8. 【易错点 2】修改 manifest 文件才能触发缓存更新
  9. 【易错点 3】注意 manifest 文件自身的缓存问题