浏览器原理 · 49/51
1. addEventListener 第三个参数 2. addEventListener 与 attachEvent 区别 3. 浏览器兼容性测试与内核 4. 浏览器兼容性问题 5. 浏览器内核与引擎 6. 浏览器图层创建条件 7. 浏览器多进程架构 8. 浏览器渲染机制 9. 浏览器存储方案 10. 浏览器版本检测方法 11. children 与 childNodes 区别 12. 常见浏览器兼容性问题 13. Chrome 页面进程数量 14. 坐标系统对比 15. 多标签页通讯方案 16. 删除 Cookie 17. 自定义事件 18. DOM 事件处理方式演进 19. 元素尺寸属性对比 20. DOM 节点操作 21. DOM 事件机制 22. addEventListener 与 attachEvent 的区别 23. 获取页面所有复选框 24. HTMLCollection 与 NodeList 区别 25. Hybrid 应用开发 26. 强缓存命中机制 27. 浏览器缓存机制 28. 页面编码与资源编码不一致处理 29. jQuery 事件绑定方法对比 30. Input 点击触发的事件顺序 31. JavaScript 浏览器兼容性问题 32. jQuery 多事件绑定实现 33. JSBridge 原理 34. 链接点击后 Hover 失效解决方案 35. 减少重绘和回流的性能优化 36. 移动端 300ms 点击延迟问题 37. 移动端视口配置 38. 移动端点击穿透问题解决 39. 移动端兼容性问题 40. JSBridge 原理与实现 41. 移动端 1px 像素问题解决方案 42. 浏览器渲染流程 43. 页面加载完成事件对比 44. Offset、Scroll、Client 属性对比 45. 同源策略与跨域解决方案 46. Script 标签位置对页面加载的影响 47. Service Worker 与 PWA 48. 存储方案对比:Cookie、Storage、IndexedDB 49. 强缓存默认时间 50. URL 到页面显示的完整过程 51. V8 引擎 JavaScript 执行过程

强缓存默认时间

HTTP 强缓存在未设置过期时间时的默认行为

问题

当服务器没有设置 Cache-ControlExpires 时,浏览器的默认强缓存时间是多少?

解答

没有固定的默认值。浏览器会使用**启发式缓存(Heuristic Caching)**来计算缓存时间。

计算公式

缓存时间 = (Date - Last-Modified) × 10%

即:资源最后修改时间距今越久,缓存时间越长。

示例

HTTP/1.1 200 OK
Date: Mon, 01 Jan 2024 00:00:00 GMT
Last-Modified: Mon, 01 Jan 2023 00:00:00 GMT
Content-Type: text/html
// 计算启发式缓存时间
const date = new Date('2024-01-01').getTime();
const lastModified = new Date('2023-01-01').getTime();

// 资源"年龄":365 天
const age = date - lastModified;

// 缓存时间:365 × 10% = 36.5 天
const cacheTime = age * 0.1;

console.log(cacheTime / (1000 * 60 * 60 * 24)); // 36.5 天

显式设置缓存时间

# 推荐:明确设置缓存策略
Cache-Control: max-age=31536000

# 或设置过期时间
Expires: Wed, 01 Jan 2025 00:00:00 GMT

关键点

  • Cache-ControlExpires 时,浏览器使用启发式缓存
  • 计算公式:(Date - Last-Modified) × 10%
  • 必须有 Last-Modified 头才能计算,否则可能不缓存
  • 不同浏览器实现可能略有差异(10% 是 RFC 建议值)
  • 生产环境应显式设置 Cache-Control,避免依赖默认行为