当前位置：首页 > 行业动态 > 正文

html5图片缓存

HTML5通过Service Worker配合Cache API实现图片缓存，可离线

浏览器缓存机制与HTML5图片缓存基础

浏览器默认会对图片进行缓存,主要通过以下HTTP头控制：

  • Cache-Control: max-age=3600（缓存1小时）
  • Expires: 绝对过期时间
  • ETag & Last-Modified: 协商缓存
缓存类型 触发条件 特点
强缓存 首次请求后再次访问 直接返回缓存资源，不发请求
协商缓存 缓存过期后再次访问 发送If-None-Match/If-Modified-Since验证资源是否更新

HTML5 Application Cache（已弃用）

通过manifest文件声明缓存资源：

<html manifest="cache.manifest">

cache.manifest示例：

html5图片缓存 第1张

CACHE MANIFEST
# v1.0
/images/logo.png
/css/style.css
特性 说明
离线存储 可缓存页面及资源实现离线访问
更新机制 修改manifest文件版本号触发更新
状态 2015年后主流浏览器逐步停止支持

Service Worker缓存（现代方案）

通过JavaScript注册独立线程处理缓存：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

sw.js核心逻辑：

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('image-cache-v1').then((cache) => {
      return cache.addAll([
        '/images/logo.png',
        '/images/banner.jpg'
      ]);
    })
  );
});
功能阶段 事件 作用
安装阶段 install 预缓存资源
激活阶段 activate 清理旧缓存
运行阶段 fetch 拦截网络请求

图片缓存最佳实践

  1. 缓存优先级策略：

    • 高频使用的小图标放入Service Worker缓存
    • 动态图片使用Cache-Control: no-cache强制协商缓存
    • WebP格式比JPEG/PNG减少40-60%体积

  2. 版本控制方案：

    const CACHE_VERSION = 'v3'; // 修改版本号自动更新缓存

  3. 离线存储设计：

    • 关键页面图片放入Service Worker缓存
    • 非关键图片使用Lazy Loading延迟加载

相关问题与解答

Q1：如何强制浏览器刷新图片缓存？
A1：可通过以下方式实现：
① URL追加随机参数：logo.png?t=123
② 设置Cache-Control: no-cache头
③ 使用Service Worker主动删除旧缓存： 

caches.delete('old-cache-name');

Q2：Service Worker和App Cache的主要区别是什么？
A2：核心差异对比表：
| 特性 | Service Worker | App Cache |
|——|—————-|———–|
| 编程方式 | JavaScript API | Manifest文件 |
| 更新机制 | 可编程控制 | 依赖manifest版本号 |
| 兼容性 | Chrome/Firefox/Edge | 仅部分浏览器支持 |
| 功能扩展 | 可拦截所有网络请求

图片
0

相关文章