<noscript>仅在页面加载时JavaScript被禁用才生效，用于静态降级；JS启用时它不解析，不响应式，须放<body>内并配合语义化结构与服务端兜底。
noscript 标签只在脚本被禁用时生效，且仅对初始渲染有效
浏览器是否执行 <noscript> 内容，完全取决于页面加载时 JavaScript 是否被禁用（例如用户手动关闭、策略拦截、或某些企业/教育环境强制禁用），而不是看 document.write 或动态插入。一旦页面加载完成，再启用/禁用脚本都不会触发 <noscript> 的重渲染——它不是响应式容器，也没有生命周期钩子。
常见错误是把它当“备用 DOM 模板”用，比如在 JS 里删掉主内容、再靠 <noscript> 补上；这行不通，因为 JS 启用时，<noscript> 根本不会被解析。
- 只适用于静态降级：比如 JS 加载失败、或用户主动禁用后首次打开页面
- 不能和
defer/async脚本竞争渲染时机——它在 HTML 解析阶段就决定是否插入 - 在 Chromium 系浏览器中，若启用了
chrome://settings/content/javascript关闭 JS，<noscript>会生效；但若只是通过 DevTools 的 “Disable JavaScript” 临时关闭，刷新后才真正生效
把 noscript 放在 body 末尾能避免布局抖动，但必须配合语义化结构
<noscript> 可以出现在 <head> 或 <body> 中，但放在 <head> 里只能放 <link>、<meta>、<style> 等允许标签；想展示替代内容（如提示文字、静态表单、纯 HTML 列表），必须放在 <body> 内，且建议紧贴实际内容区块之后或末尾。
例如你有一段由 JS 渲染的交互式商品列表，降级方案不是“在 JS 里 render 一个 div”，而是直接写好静态版本，并用 <noscript> 包裹：
立即学习“前端免费学习笔记（深入）”；
<div id="product-list"></div>
<noscript>
<section aria-label="商品列表（JavaScript 已禁用）">
<h2>推荐商品</h2>
<ul>
<li>无线耳机 — ¥199</li>
<li>机械键盘 — ¥459</li>
</ul>
</section>
</noscript>
- 不要把
<noscript>放在<div id="product-list">内部——它不会替换该 div，而是作为兄弟节点插入 - 务必加
aria-label或其他辅助属性，让屏幕阅读器知道这是降级内容 - 避免内联样式；降级内容应继承全局 CSS，否则禁用 JS 时样式可能丢失
与 <script nomodule> 配合可覆盖现代模块加载失败场景
<noscript> 不处理 ES 模块加载失败（如 type="module" 报错）、也不管 import() 动态导入异常。这类情况需要额外兜底：用 <script nomodule> 提供旧版 bundle，再用 <noscript> 应对彻底无 JS 环境。
典型组合写法：
<script type="module" src="app.mjs"></script> <script nomodule src="app.legacy.js"></script> <noscript> <p>您的浏览器不支持 JavaScript，部分功能不可用。</p> <a href="/basic-mode">进入简化版页面</a> </noscript>
-
nomodule脚本在支持type="module"的浏览器中会被忽略，但老浏览器会执行它——这是渐进增强的关键一环 -
<noscript>是最后一道防线：连nomodule都不执行的环境（如 JS 全局禁用），才显示其中内容 - 链接目标（如
/basic-mode）不应依赖前端路由，而应是服务端直出的完整 HTML 页面
服务端渲染（SSR）环境下 noscript 几乎无用，需换思路
如果你用 Next.js、Nuxt 或类似框架做 SSR，HTML 已含完整内容，JS 主要负责 hydration 和交互增强。此时 <noscript> 不会触发，因为 JS 默认启用，且服务端无法感知客户端 JS 状态。
真要支持 JS 禁用用户，得靠服务端逻辑判断 User-Agent + 请求头（如 Sec-CH-UA-Model 不可靠），更现实的做法是：
- 在入口 HTML 模板中保留一份静态内容副本，用
<noscript>包裹（前提是 SSR 输出的是“JS 启用版”） - 或提供明确的
?nojs=1查询参数，服务端据此返回无交互、纯语义化 HTML - 别依赖
window.navigator.cookieEnabled之类客户端检测来决定是否插入<noscript>——它本身就要 JS 才能运行
最常被忽略的一点：<noscript> 里的链接、表单、按钮，必须全部指向服务端可处理的 endpoint；任何依赖 fetch / FormData / history.pushState 的行为，在这里都等于不存在。
