<noscript>仅在浏览器明确禁用JavaScript时生效，不是JS加载失败或执行报错的兜底方案；必须置于<body>中才能显示提示文字或按钮，且需提供真实可用的替代路径而非仅文字提醒。
noscript 标签只在脚本被禁用时生效
<noscript> 不是“检测 JS 是否加载失败”，而是浏览器明确识别到 JavaScript 被用户或策略禁用（比如 Firefox 选项里关了 JS，或 Chrome 启用了 javascript.enabled = false）时才渲染其内容。它对网络中断、JS 报错、defer 加载失败、CSP 阻断等情况完全无反应——这些场景下标签不会显示。
常见误用是把它当“JS 加载 fallback”：比如页面依赖 React 渲染，开发者放个 <noscript>请启用 JavaScript</noscript>，结果用户 JS 没禁用但因 CDN 失败白屏，提示却没出现。
必须放在 <body> 内且位置合理
<noscript> 可以出现在 <head> 或 <body>，但只有在 <body> 中的内容才能参与文档流渲染。放在 <head> 里的 <noscript> 只能包含 <link>、<style>、<meta> 等有限标签，无法显示提示文字或按钮。
- 正确做法：把提示文案放在
<body>开头或关键区域上方，例如<body><noscript><div class="alert">请启用 JavaScript 以使用完整功能</div></noscript>... - 避免嵌套在动态组件内部（如 Vue/React 的
<template>或 JSX 中），服务端渲染时可能被忽略，客户端又不触发 - 不要依赖 CSS 选择器如
noscript + *做样式联动——禁用 JS 时浏览器通常也不执行样式计算逻辑，兼容性差
提示内容要具体、可操作，别只说“启用 JavaScript”
普通用户不知道怎么启用 JS，尤其在移动端或公司设备上权限受限。纯文本提示效果极差。
立即学习“前端免费学习笔记（深入）”；
- 给出明确路径：Firefox 是「设置 → 隐私与安全 → 向网站提供网站特定的权限 → JavaScript → 允许」；Chrome 是「设置 → 隐私和安全 → 网站设置 → JavaScript → 允许」
- 加一个静态功能入口：比如禁用 JS 时展示一个纯 HTML 表单提交链接，或跳转到简化版静态页（
<a href="/basic.html">访问基础版</a>） - 避免使用 JS 控制的交互元素：里面不能有
onclick、href="javascript:"，否则失效 - 字体大小、对比度要达标：禁用 JS 的用户可能也依赖辅助技术，确保
<noscript>内容满足 WCAG AA 对比度要求
配合 CSP 或构建流程做双重兜底
仅靠 <noscript> 不足以覆盖真实生产问题。很多企业环境通过 CSP script-src 'none' 或代理层过滤 JS，此时浏览器仍认为 JS “可用”，<noscript> 不触发。
更可靠的做法是：在 JS 入口第一行写 document.documentElement.classList.add('js-enabled')，然后用 CSS 规则 .js-enabled .no-js { display: none; } 隐藏备用内容；同时保留 <noscript> 作为最后防线。
这样既捕获真·禁用场景，也覆盖 CSP/网络拦截等伪禁用情况。但注意：这个 class 添加必须在所有样式和布局逻辑之前，否则闪屏或错位。
真正难处理的是那些既没禁 JS、又没报错、但关键模块（比如身份验证 SDK）静默失败的情况——<noscript> 完全不介入，得靠运行时健康检查和降级 UI 控制。
