浏览器缓存

强缓存和协商缓存

  • 强缓存:客户端直接使用缓存,不向服务器发送请求。
    • 使用 ExpiresCache-Control 头部。
  • 协商缓存:客户端向服务器发送请求,根据服务器返回的状态决定是否使用缓存。
    • 使用 Last-ModifiedETag 头部。
  • 状态码:强缓存返回 200 (from cache),协商缓存返回 304 (Not Modified)。

Expires 与 Cache-Control 的使用

  • Expires:使用绝对时间来表示资源的过期时间。
  • Cache-Control:使用相对时间来表示资源的缓存时间,例如 max-age
  • 优先级Cache-Control 优先级高于 Expires

代理服务器

  • 定义:代理服务器是一个中间服务器,位于客户端和目标服务器之间,用于转发请求和响应。
  • 功能
    • 缓存:存储服务器响应以减少延迟。
    • 过滤:阻止访问某些网站或内容。
    • 安全:隐藏客户端 IP 以增强隐私和安全。

离线缓存实现

  • Service Workers
    • 注册 Service Worker。
    • install 事件中缓存资源。
    • fetch 事件中提供缓存资源。
  • Cache API
    • 打开缓存并存储资源。
    • 匹配缓存中的资源以实现离线访问。
  • IndexedDB:用于存储大量结构化数据,适合复杂查询和离线应用。
  • Manifest 文件:一种已废弃的应用缓存方式。

在公司知乎 App 上实现离线缓存

  • 创建并注册 Service Worker。
  • 使用 Cache API 缓存资源。
  • 动态缓存新的请求并更新过期缓存。
  • 测试和优化缓存策略。

各大厂离线缓存和访问速度优化策略

  • 字节跳动
    • 使用 PWA 和 Service Workers 实现离线缓存。
    • 部署全球 CDN 网络和边缘计算。
  • 阿里巴巴
    • 前端优化和资源预加载。
    • 使用多级缓存系统和智能缓存策略。
  • 腾讯
    • 使用腾讯云 CDN 和边缘计算。
    • 实现智能缓存策略和性能监控。

参考资料

整理时间:{datetime.now().strftime('%Y-%m-%d %H:%M:%S')}

Last Updated:
Contributors: guoli