不能用 fetch('/index.html') 算 md5，因为其返回的是经 cdn 缓存、中间件注入、压缩或动态重写后的响应体，非原始文件；应通过 filereader 读取本地 file 对象的 arraybuffer 并用 spark-md5 计算。
浏览器里直接对用户选中的 File 对象算 MD5，不能用 fetch() 请求服务端 HTML 文件——你拿到的可能是 CDN 缓存、中间件注入脚本后的内容，和原始文件不一致。
为什么不能用 fetch('/index.html') 算 MD5
同源策略下 fetch() 返回的是 HTTP 响应体，但这个响应体不等于磁盘上的原始 HTML 文件。常见干扰包括：
- CDN 或反向代理返回了缓存副本
- 服务器自动插入统计代码、广告脚本或 CSP meta 标签
- HTTP/2 Server Push 或 gzip 解压后再传输，导致字节流被修改
- 某些 CMS（如 WordPress）会在输出时动态重写 HTML 结构
所以服务端 HTML 的真实 MD5 必须在构建/部署阶段就计算好，并通过 <meta name="hash"> 或独立接口（如 /index.html.md5）暴露给前端。
浏览器中正确计算用户上传 HTML 文件的 MD5
用户通过 <input type="file"> 选择本地 HTML 文件后，可用 FileReader + spark-md5 计算其 MD5。关键点：
- 必须用
FileReader.readAsArrayBuffer()或file.arrayBuffer()获取原始二进制数据，不能用readAsText()（编码转换会破坏哈希） -
spark-md5是目前最轻量、兼容性最好的纯 JS MD5 库，支持流式追加（md5.append()）和一次性计算（SparkMD5.ArrayBuffer.hash()） - 大文件（>100MB）建议分块读取 + 流式计算，避免内存溢出；小文件直接用
arrayBuffer()更简单
示例代码：
async function calculateMD5(file) {
const buffer = await file.arrayBuffer();
return SparkMD5.ArrayBuffer.hash(buffer);
}
// 调用
document.querySelector('#file-input').addEventListener('change', async (e) => {
const file = e.target.files[0];
if (file && file.name.endsWith('.html')) {
const hash = await calculateMD5(file);
console.log('MD5:', hash); // 如: 'a1b2c3d4...'
}
});
Web Worker 中计算更安全，但要注意并发控制
主线程计算大 HTML 文件容易卡顿，推荐把哈希逻辑移入 Worker。但别为每个分片新建一个 Worker：
- 复用单个
Worker实例，多次postMessage() - 若需分片（如 2MB/片），用
file.slice(start, end)切分，再逐片传入 Worker - Worker 内用
SparkMD5.ArrayBuffer.hash(sliceBuffer)，不要用流式add()拼接——HTML 是完整文本，分片哈希 ≠ 整体哈希 - 主线程收到结果后立即置
buffer = null，帮助 GC 回收 ArrayBuffer 内存
MD5 已不推荐用于安全场景，校验用途仍可接受
MD5 碰撞攻击已被实证，**绝不能用于密码存储、签名、权限校验等安全环节**。但在以下场景仍广泛使用：
- 前端上传前快速比对文件是否重复（如跳过已上传过的 HTML 模板）
- 配合服务端做基础完整性校验（前提是服务端也用相同方式计算原始文件 MD5）
- 离线工具中生成文件指纹，用于去重或缓存键
如果服务端支持且你有控制权，优先改用 crypto.subtle.digest('SHA-256', buffer) ——它原生、安全、无需第三方库，但注意只在 HTTPS 或 localhost 下可用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
