仅在JS被禁用或脚本加载失败时显示，非浏览器兼容性检测工具；应使用特性检测（如CSS.supports）替代错误提示；样式需内联或高优先级；须置于底部并确保内容独立可用。
noscript 标签只在 JS 被禁用或加载失败时显示，不是浏览器兼容性检测工具
很多人把 <noscript></noscript> 当成“判断是不是 IE”或“检测是否支持 fetch”的手段，这完全错了。它只响应两个真实场景：JavaScript 被用户手动禁用，或 <script src="xxx.js"></script> 因 404 / 网络中断 / CSP 拦截而彻底没执行。一旦页面里任何一行 JS 成功运行（哪怕只是 console.log(1)），<noscript></noscript> 就不会再渲染。
所以别写：<noscript>请升级浏览器以支持 CSS Grid</noscript>——Grid 不支持跟 JS 是否启用毫无关系，这种提示对用户毫无意义，反而暴露你没做真正的特性检测。
真正该做的：用 JS 做 if (!('fetch' in window)) 或 if (!CSS.supports('display', 'grid'))，再动态插入提示 DOM；或者用 Modernizr 这类库做细粒度判断。
自定义 noscript 提示的样式必须加 !important 或高优先级选择器
<noscript></noscript> 里的内容是普通 HTML，但它的父容器往往没有 class、id 或上下文约束，很容易被全局 CSS 覆盖。比如页面写了 body * { color: #333; font-size: 14px; }，你的提示文字就可能被强制变小、变色，甚至继承到 display: inline 导致换行失效。
立即学习“前端免费学习笔记（深入）”；
稳妥做法是直接在 <noscript></noscript> 内联样式，或用强选择器：
<noscript>
<div style="position: fixed; top: 0; left: 0; width: 100%; background: #fff0f0; color: #d32f2f; padding: 12px; text-align: center; z-index: 9999; font-weight: bold;">
JavaScript 已禁用或加载失败，请检查设置
</div>
</noscript>不推荐仅靠外部 CSS 类，除非你确保该类名不会被其他样式覆盖（比如用 #browser-warning 并加 !important）。
构建工具自动注入 noscript 容易导致误触发
Webpack/Vite 插件往 HTML 模板里塞 <noscript>...</noscript> 很常见，但有个隐蔽坑：如果 JS 是异步加载（type="module" 或 defer），而 <noscript></noscript> 在 里，浏览器解析到它时 JS 还没开始下载，就会立即显示提示——哪怕几毫秒后 JS 就成功执行了。
避免方式：
- 把
<noscript></noscript>放在底部，紧贴 - 改用 JS 动态插入（配合
window.onerror+document.currentScript判断加载状态） - 如果必须服务端注入，确保构建产物中 JS 文件路径正确、CSP 允许、且无 404
尤其注意微信 WebView 和部分企业内嵌浏览器，它们有时会拦截或延迟脚本加载，让 <noscript></noscript> 成为“常驻弹窗”。
noscript 里的内容要能独立可用，不能依赖 JS 补全功能
既然用户看不到 JS 效果，那 <noscript></noscript> 里的东西就得自己跑通。比如你放了个“登录按钮”，背后是 JS 提交表单，那降级方案就得是原生 <form action="/login" method="post"></form>，带完整 <input name="username"> 和 <button type="submit"></button>。
常见错误：
- 只写文字提示，没给任何替代操作路径
- 放了个空
<div id="app"></div>，然后指望 Vue 渲染——JS 失效时这就是个空白块 - 提示里写“点击此处重试”，但链接是
javascript:void(0)，点不了
最简验证法：打开 Chrome 设置 → 禁用 JavaScript → 刷新页面，看 <noscript></noscript> 内容是否可读、可点、可提交、不报错。
