刷新后中文乱码的根本原因是浏览器未按UTF-8解码HTML，主因有三：文件编码非UTF-8无BOM、meta charset声明失效（位置错或被BOM阻塞）、HTTP响应头Content-Type缺失或覆盖charset；需优先检查Network中响应头，再验证文件BOM及meta位置。
刷新后中文乱码，大概率不是网络或服务器临时抖动，而是浏览器在加载时**没按 UTF-8 解码 HTML 文件**——原因通常卡在三个地方：文件实际编码不对、<meta charset="UTF-8"> 失效、或者 HTTP 响应头里的 Content-Type 覆盖了它。
为什么刷新后突然乱码？常见触发场景
页面刚改完代码、上线新版本、或本地用 file:// 打开时最容易复现。典型表现是：之前好好的，一刷新（尤其 Ctrl+F5 强制刷新）就变 黽 或方框。这不是缓存问题，而是浏览器重新走了一遍编码判定流程，暴露出原本就存在的声明缺陷。
- VS Code 保存时误选了
UTF-8 with BOM，BOM 字节ef bb bf挡在<meta charset>前面，导致浏览器跳过该声明 -
<meta charset="UTF-8">写在<head>里但前面有空格、换行或 HTML 注释，浏览器只扫描前 1024 字节，没扫到它 - 用 Python
http.server、Nginx 默认配置或 Express 静态服务时，响应头没带charset=utf-8，服务器返回text/html而非text/html; charset=utf-8 - 本地双击打开 HTML 文件（
file://协议），此时无 HTTP 响应头，全靠<meta charset>，一旦它失效就直接 fallback 到 Windows 的 GBK
怎么快速验证是哪一层出问题？
打开开发者工具（F12），切到 Network 标签页，刷新页面，点中主 HTML 请求，看 Response Headers 里的 Content-Type 值：
- 如果是
text/html; charset=gbk或text/html; charset=iso-8859-1→ 服务器配置问题，<meta charset>直接被无视 - 如果是
text/html（没带charset子句）→ 依赖<meta charset>，这时要检查它是否生效 - 如果压根没这个字段，且协议是
file://→ 只能靠<meta charset>，必须确保它位置正确、文件编码匹配
再用命令行验证文件本身：head -c 4 index.html | xxd（Linux/macOS）或 Get-Content index.html -Encoding Byte | Select -First 3（PowerShell）。输出含 ef bb bf 就说明有 BOM，得删。
立即学习“前端免费学习笔记（深入）”；
VS Code 里修复乱码的实操步骤
别急着改代码，先确认并修正文件底层编码：
- 右下角状态栏看当前编码显示 —— 如果是
GBK、UTF-8 with BOM或空白，就已中招 - 点击该编码标识 → 选
Reopen with Encoding→ 试GBK、UTF-8、ISO-8859-1，直到中文正常显示（此时只是预览，还没保存） - 确认显示正确后 → 点击编码标识 →
Save with Encoding→ **严格选UTF-8（不带 “with BOM”）** - 手动检查
<head>开头：确保<meta charset="UTF-8">是<head>里的第一个非空、非注释标签，前面不能有任何字符（包括空格和换行）
改完立刻用无痕窗口测试，避免旧缓存干扰判断。
服务端 Content-Type 必须显式声明 charset
静态文件托管或后端渲染时，光写 <meta charset> 不够，HTTP 响应头优先级更高：
- Nginx：在
location块里加charset utf-8;（注意不是add_header Content-Type，那会重复 header） - Express：在
res.send()或res.sendFile()前调用res.set("Content-Type", "text/html; charset=utf-8") - PHP：在任何输出（包括
<?php前空白）之前加header("Content-Type: text/html; charset=utf-8"); - Python
http.server：默认不带 charset，建议换用live-server或加 WSGI 中间件补全
特别注意：Nginx 的 charset 指令只对 text/html 等文本类型生效，且不能写成 charset utf8（少个连字符）或 charset UTF-8（大小写敏感，官方文档要求小写）。
真正容易被忽略的是 BOM 和响应头的优先级关系：哪怕你把 <meta charset> 写得再标准，只要文件开头有 BOM 或服务端返回了 charset=gbk，乱码就会稳稳出现。排查时务必从响应头开始，而不是一头扎进 HTML 源码。
