404页面应慎用JavaScript，优先保障纯HTML+内联CSS独立渲染；若需自动跳转，用setTimeout设10秒以上兜底，并确保服务器正确配置error_page指向404.html文件。
404页面要不要用JavaScript？
大多数静态站点的 index.html 作为404页时，根本不会执行JavaScript——因为服务器返回的是 404 状态码，而部分CDN（如Cloudflare免费版）、GitHub Pages、或Nginx默认配置下，会拦截并替换你写的HTML，直接注入自己的错误页，导致你的JS不运行、CSS不加载。
所以优先保证纯HTML+内联CSS能独立渲染，把交互逻辑降到最低：
- 所有样式写在
<style>标签里，别依赖外部main.css - 避免调用
fetch()、history.back()等可能被拦截或失效的操作 - 如果必须加JS（比如自动跳转首页），用
setTimeout包一层，并设10秒以上兜底超时
如何让404页面真正生效而不是被服务器覆盖？
光有好看的 index.html 没用——关键是告诉服务器“这个文件就是404响应体”。不同环境配置方式差异很大：
- GitHub Pages：必须在仓库根目录放
404.html，名字不能改，且不能是index.html；它会自动接管所有404请求 - Nginx：在
server块里加error_page 404 /404.html;，并确保/404.html路径可被静态访问（不是重写规则里的路径） - Vercel/Netlify：分别通过
vercel.json的rewrites或_redirects文件声明/* /404.html 404
常见坑：location / { try_files $uri $uri/ /index.html; } 这类SPA fallback规则会把404也吞掉，返回200状态码的 index.html，浏览器控制台看到的是 Failed to load resource: the server responded with a status of 200 OK，但实际是假404。
立即学习“前端免费学习笔记（深入）”；
怎么让404页面看起来不廉价又保持轻量？
不需要动画库或大图，几个小技巧就能提升专业感：
- 用系统字体栈（如
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;），避免Web Font加载失败导致文字错位 - 主标题用
<h1>，但加aria-hidden="true"，再用<span class="visually-hidden">页面未找到</span>做无障碍文本 - 加一个极简SVG图标（比如404里的“4”用描边路径画，不到1KB），比PNG更清晰且无需额外HTTP请求
- 底部放一个真实有效的链接：比如
<a href="/">回到首页</a>，别写“点击此处”这种无意义文案
别用 background-image 加高清大图——移动端首屏加载可能白屏2秒，用户早关掉了。
如何验证404页面是否真的按预期工作？
本地用 file:// 打开 index.html 完全没用，那只是普通页面。必须走HTTP协议才能触发状态码逻辑：
- 用
npx serve -s启动本地静态服务，然后手动访问http://localhost:5000/nonexistent-path - 打开浏览器开发者工具 → Network 面板 → 刷新页面 → 找那个请求，确认响应头里有
Status: 404 Not Found，且Preview里是你写的HTML内容 - 用
curl -I http://yoursite.com/xyz看返回状态行，别只信视觉效果
最常被忽略的一点：很多构建工具（如Vite、Webpack Dev Server）开发时默认不启用真实404路由，而是返回SPA fallback，必须查清当前环境是否模拟了服务端行为。
