Google浏览器缓存与预加载机制详解
缓存机制基础
1. 强缓存：浏览器通过设置资源的过期时间（如`Expires`头）或使用`Cache-Control`头（如`max-age=31536000`）实现强缓存。当资源在缓存中存在且未过期时，浏览器直接使用本地副本，无需向服务器发送请求。例如，静态资源（如图片、CSS文件）可设置长期缓存，减少重复下载。
2. 协商缓存：当资源过期或需验证时，浏览器会发送带有`If-Modified-Since`或`If-None-Match`头的请求。服务器若返回`304 Not Modified`，则浏览器继续使用缓存；若返回新资源和`200 OK`，则更新缓存。
预加载机制与触发条件
1. 预加载类型：
- link rel="preload"：用于关键资源（如字体、首屏图片），提前加载并存储在内存中。例如，预加载字体可避免页面渲染时的FOIT（闪字）问题。
- link rel="prefetch"：低优先级预取资源（如下一页内容），利用空闲带宽加载，不影响当前页面渲染。
- DNS预取与预连接：通过link rel="dns-prefetch"和link rel="preconnect"提前解析域名或建立连接，加速后续资源加载。
2. 触发场景：
- 用户行为：鼠标悬停、点击链接时，浏览器可能预加载目标页面资源。
- 智能预测：基于历史访问数据和页面结构，浏览器预测用户下一步操作并提前加载资源。
缓存与预加载的结合应用
1. 资源优化策略：
- 缓存头配置：静态资源建议设置`Cache-Control: max-age=31536000`并添加版本哈希（如`main.abc123.js`），确保更新后浏览器获取新资源。
- 预加载关键资源：在HTML中添加link rel="preload" href="font.woff2" as="font"，确保字体等关键资源优先加载。
2. 实战示例：
- 图片预加载：通过JavaScript创建`Image`对象，将图片地址赋值给`src`属性，触发加载并存入内存缓存。例如，批量预加载图片资源，避免页面切换时的延迟。
- 清理与更新：定期清除旧缓存（按`Ctrl+Shift+Del`），或通过开发者工具（`Chrome DevTools > Network`）监控资源是否从缓存或网络获取。
异常处理与性能优化
1. 缓存失效修复：若资源更新后仍显示旧内容，可强制刷新（按`Ctrl+F5`）或手动清理缓存。企业环境可通过组策略（`gpedit.msc`）设置缓存自动清理周期。
2. 预加载资源管理：避免过度预加载导致带宽浪费。例如，仅对用户可能访问的子页面（如导航栏链接）使用`prefetch`，而非所有页面。
3. 硬件加速优化：在`chrome://flags/`中启用“预读取资源”（`enable-prerendering`），提升大文件或内网系统加载速度。