<noscript>仅在JavaScript被明确禁用时生效，是浏览器对javascript.enabled状态的一次性快照，不响应加载失败、CSP拦截或运行时错误；必须置于<body>中且内容需内联或使用绝对路径才有效。
<noscript> 不是“降级开关”，而是浏览器在加载瞬间对 javascript.enabled 状态的一次性快照。它不响应网络波动、脚本超时、CSP拦截或模块加载失败——只要 JS 引擎开着，它就彻底隐身。
为什么
常见误判：页面白屏 → 以为是 JS 没加载完 → 期待 <noscript> 显示提示。但真实情况是：
- JS 引擎仍运行中（
javascript.enabled === true），<noscript>根本不进入 DOM 树 - 网络中断只导致
<script src="bundle.js">加载失败，但 HTML 解析照常进行，<noscript>被跳过 - 若使用
type="module"或async，加载失败也不会触发<noscript>，它只认“是否禁用”，不认“是否加载成功”
真正能在断网/超时下起作用的替代方案
要覆盖“JS 已启用但资源拿不到”的场景，必须绕开 <noscript> 的语义限制，改用可执行逻辑兜底：
- 用
<script nomodule>提供非模块化 fallback bundle（兼容旧浏览器 + 断网时有基础 JS） - 在主入口 JS 中加超时检测：
setTimeout(() => { if (!window.appLoaded) showFallbackUI() }, 5000) - 服务端渲染（SSR）输出首屏 HTML 后，再由 JS “接管”。即使 JS 失效，用户至少看到结构化内容
- 对关键资源（如 logo、核心表单）采用内联方式：
<img src="data:image/svg+xml;base64,...">，避免外部请求失败导致空白
放在末尾的
纯 CSR 项目（如未配置 SSR 的 React/Vue）中，<noscript> 很可能被框架的 hydration 过程覆盖或忽略：
立即学习“前端免费学习笔记（深入）”；
- React 在
hydrateRoot()时会比对服务端生成的 HTML，若发现不一致（比如<noscript>区块和客户端预期不符），可能直接丢弃该节点 - Vite/HMR 热更新时，整个
<body>可能被重写，<noscript>若没被显式保留，就会消失 - 解决方案：只在 SSR/SSG 输出的 HTML 中放置
<noscript>，且确保其内容与客户端渲染逻辑无冲突（例如不依赖id="app"内部结构）
最易被忽略的一点：你写的 <noscript> 是否真能独立运行？里面所有 src、href 必须是绝对路径或 base64 内联，否则 JS 禁用时相对路径 404，降级内容变成空盒子。
