<noscript> 标签仅在浏览器 JavaScript 被显式禁用（如 javascript.enabled = false）或极简环境（如 Lynx、无 JS 爬虫）下渲染，不响应加载失败、CSP 拦截或运行时错误；必须作为依赖 JS 功能区块的直接兄弟节点置于 <body> 中，内容需静态、内联资源与样式，且纯 CSR 项目中无效，须配合 SSR/SSG 才有意义。
noscript 标签只在 JS 被明确禁用时才渲染，不是加载失败兜底
它只响应浏览器底层开关状态（javascript.enabled = false），不感知 script 标签 404、CSP 拦截、type="module" 加载超时或运行时报错。只要 JS 引擎能跑，哪怕整个页面白屏，<noscript></noscript> 内容也根本不会进入 DOM。
常见误判：用户断网 → bundle.js 拿不到 → 页面空白 → 以为 <noscript></noscript> 该显示。实际是 JS 开关仍开着，标签被跳过。
真正触发它的只有两类场景：
- 用户手动关闭浏览器 JS（Chrome 设置里关掉
chrome://settings/content/javascript，Firefox 配置项javascript.enabled = false） - 极简环境（Lynx、部分无障碍阅读器、无 JS 的爬虫直读 HTML）
必须放在 中且紧贴功能区块，不能嵌套也不能放 head
<noscript></noscript> 在 里只能放 <link>、<style></style>、<meta>；放 <p></p> 或表单，浏览器直接忽略，用户什么都看不到。
立即学习“前端免费学习笔记（深入）”；
正确位置是紧跟依赖 JS 的功能区块之后，作为其直接兄弟节点：
<div id="search-widget"></div>
<noscript>
<form method="GET" action="/search">
<input name="q" placeholder="搜索关键词">
<button type="submit">搜索</button>
</form>
</noscript>
错误写法包括：
-
<noscript></noscript>嵌套在<div id="app"> 里（JS 禁用后整个 div 不渲染，<code><noscript></noscript>一起消失） - 写在
<script></script>标签内部（语法非法，整块被丢弃） - 作为自闭合标签
<noscript></noscript>（无效） -
src和href必须是绝对路径（如/assets/logo.svg）或 base64 内联（如<img src="data:image/svg+xml;base64,...">），相对路径在 JS 禁用时极易 404 - 样式必须用
style属性内联，不能依赖外部 CSS 类（全局规则可能覆盖或未加载） - 表单必须带
method和action，按钮用type="submit"，链接用原生<a href>，不能靠 JS 绑定行为 - 服务端直出首屏 HTML（SSR/SSG），让
<noscript></noscript>有真实内容可降级 - 主 JS 入口加超时检测：
setTimeout(() => { if (!window.appLoaded) showFallbackUI() }, 5000) - 用
<script nomodule>提供非模块化 fallback bundle，覆盖旧浏览器 + 断网场景 - 关键资源（logo、核心表单字段）全部内联，避免外部请求失败导致空白
降级内容必须原生可用，所有资源路径需绝对或内联
<noscript></noscript> 里不执行任何逻辑，不支持 onclick、data- 属性、loading="lazy" 或 srcset。它只渲染你写的静态 HTML，且所有外部引用必须能独立工作。
关键约束：
例如地图组件失效时，别写“地图加载失败”，而应提供地址文本 + 直接跳转 Google Maps 的链接：<a href="https://www.google.com/maps?q=xxx">查看位置</a>。
纯 CSR 项目中 <noscript></noscript> 几乎无效，需配合 SSR 或客户端检测
像未配置 SSR 的 React/Vue 应用，默认 <div id="root"></div> 是空的，JS 禁用后只剩一个空容器，<noscript></noscript> 即使写了也因无上下文而失去意义。
更现实的应对方式：
最容易被忽略的一点：<noscript></noscript> 本身不参与 DOM 构建流程，不触发事件、不参与样式计算、不影响可访问性评分——它只是个视觉提示层，没法补逻辑，也没法救白屏。
