<noscript>仅在浏览器全局禁用JavaScript时生效，不捕获JS运行时错误、加载失败或语法错误；必须作为<body>直接子元素使用，SSR中易冗余或丢失，移动端WebView支持不一致。
noscript 标签只在脚本被禁用时生效，不是“JS 加载失败”时的兜底
很多人误以为 <noscript> 能捕获 TypeError: Cannot read property 'xxx' of undefined 或网络加载失败导致的 JS 错误，其实不会。它只响应浏览器层面的脚本全局开关关闭（比如 Chrome 设置里手动关掉 JavaScript，或某些企业内网策略强制禁用）。JS 语法错误、资源 404、await 报错、甚至 <script defer src="404.js"> 都不会触发 <noscript> 渲染。
常见错误现象：
– 页面加了 <noscript><p>请开启 JavaScript</p></noscript>，但用户遇到白屏或报错时完全看不到提示
– 开发者用它替代 try/catch 或 loading fallback，结果毫无作用
正确使用场景：
– 纯静态降级：如禁用 JS 后显示纯 HTML 表单而非 React 表单
– SEO 友好补充：搜索引擎爬虫（部分仍不执行 JS）看到的内容
– 内网/终端设备兼容：如某些银行柜面终端默认禁用脚本
noscript 必须是 body 直接子元素才可靠，嵌套在 div 里会失效
<noscript> 的行为在不同浏览器中对嵌套层级敏感。Chrome 和 Firefox 在 <div><noscript>...</noscript></div> 中可能直接忽略该标签，尤其当父容器是 display: none 或尚未插入 DOM 时。W3C 规范虽未明文禁止嵌套，但实际解析逻辑依赖 parser 的“脚本启用状态快照”，而该快照只在进入 <body> 后、首次遇到脚本相关 token 时确定。
立即学习“前端免费学习笔记（深入）”；
实操建议：
– 总把 <noscript> 放在 <body> 最顶层，紧贴 <body> 开始或结束标签
– 避免包裹在 <section>、<main> 或自定义组件模板中
– 若需局部降级（如某个卡片），改用 JS 检测：if (typeof window !== 'undefined' && !window.document.createElement('div').hasOwnProperty('innerText')) { /* fallback */ }（更稳妥的是 'noModule' in document.createElement('script') 结合 UA 判断）
服务端渲染（SSR）下 noscript 内容可能被重复渲染或丢失
Next.js、Nuxt 等框架在生成 HTML 时会把 <noscript> 当作普通标签输出，但 hydration 过程中 React/Vue 不管理它——这导致两个问题：
– SSR 输出的 <noscript> 内容在 JS 启用后仍留在 DOM 中（冗余）
– 若组件逻辑依赖 <noscript> 提供的数据（如隐藏字段），JS 启用后无法读取（因为该节点不参与 VDOM）
解决方案：
– 不在 SSR 组件中写 <noscript>，统一提到 _document.tsx 或 app.html 底层模板
– 若必须动态控制，用 useEffect(() => { if (!navigator?.onLine) document.body.classList.add('no-js') }, []) 配合 CSS 隐藏/显示备用内容
– 避免在 <noscript> 里放 <input type="hidden"> 等需要被表单提交的元素——它们在 JS 启用后不会同步到 React state
移动端 WebView 和旧版 Safari 对 noscript 支持不一致
iOS 14.5 之前的 UIWebView、部分 Android 系统内置 WebView（如三星 Internet 早期版本）会完全跳过 <noscript> 解析；Safari 在「限制跨站跟踪」开启时偶发不触发。这不是 bug，而是这些环境把脚本启用状态判定为“真”，哪怕用户没主动开启，底层也默认允许基础脚本运行。
这意味着：
– 不能靠 <noscript> 实现关键功能降级（如支付入口、登录表单）
– 测试必须覆盖真实设备的 WebView 容器（如 Cordova、Capacitor），不能只靠桌面 Chrome 的“禁用 JS”模拟
– 替代方案更可靠：服务端 User-Agent 检测 + 输出两套 HTML，或前端用 document.write（仅限初始渲染）动态注入降级内容
最常被忽略的一点：即使你写了完美的 <noscript>，只要页面里有任一 <script async> 成功加载并执行，后续所有 <noscript> 都不会再被渲染——它的判断只发生在 HTML 解析初期，且不可逆。
