Nginx 配置 ETag 可提升 Canvas 静态资源缓存效率，需集中资源路径、启用 etag on、关闭 sendfile 与 gzip_vary，并设置 Cache-Control；同时确保 Last-Modified 兼容性及通过开发者工具验证 304 响应。
通过 Nginx 配置 ETag，可以让浏览器对 Canvas 所用的静态资源（如图片、字体、JS 库）自动缓存并校验，避免重复下载。关键在于让 Nginx 为这些资源生成稳定、可复用的 ETag，并配合 Cache-Control 合理控制缓存行为。
确保静态资源路径明确且可预测
Canvas 绘图常依赖外部资源，例如：
- /assets/images/bg.png
- /libs/fabric.min.js
- /fonts/roboto.woff2
Nginx 需能精准识别这些路径，才能统一配置响应头。建议将 Canvas 相关资源集中放在 /assets/ 或 /static/ 下，便于 location 块匹配。
启用 ETag 并禁用不稳定的生成方式
Nginx 默认开启 ETag（基于文件大小 + 修改时间），但若启用了 sendfile on 或启用了 gzip 分块压缩，可能影响 ETag 稳定性。推荐配置如下：
location ~* \.(png|jpg|jpeg|gif|webp|ico|woff2|ttf|js|css)$ {
etag on;
# 关闭 sendfile（避免内核直接传输导致 mtime 不一致）
sendfile off;
# 确保 gzip 不干扰 ETag（尤其在启用 gzip_vary 时）
gzip_vary off;
# 添加缓存控制
add_header Cache-Control "public, max-age=31536000, immutable";
}
配合 Last-Modified 提升兼容性
部分老旧浏览器或代理更依赖 Last-Modified。Nginx 默认已输出该头（基于文件修改时间），无需额外开启。但要注意：
- 文件部署时避免因构建工具重写时间戳导致 ETag 变化
- 若使用 CI/CD 自动发布，建议固定源文件时间（如用 touch -r 恢复原始 mtime）或改用内容哈希命名（如 bg.a1b2c3.png）
验证 ETag 是否生效
打开浏览器开发者工具 → Network → 刷新页面 → 查看资源响应头：
- 确认存在 ETag: "xxx"（值应为双引号包裹）
- 第二次加载同一资源时，请求头中应含 If-None-Match: "xxx"
- 服务端返回 304 Not Modified，且响应体为空
若始终返回 200，检查是否被 CDN 覆盖了 ETag，或 Nginx 配置未生效（注意 location 优先级、是否被 proxy_pass 覆盖）。
