<noscript>仅在浏览器禁用JavaScript或完全不支持脚本时显示，必须置于<body>中且紧贴依赖JS的功能区块，仅作提示或静态降级，无法补功能。

<noscript> 只在浏览器明确禁用 JavaScript 时触发，不是“脚本加载失败”或“执行出错”的兜底方案。

什么情况下 <noscript> 真正显示内容

仅两种情况会渲染其内部内容：

• 用户手动关闭了 JavaScript：Chrome 设置中关闭 chrome://settings/content/javascript，Firefox 配置项 javascript.enabled = false，或安装 NoScript 插件并全局阻止脚本
• 极简环境完全不支持脚本：如 Lynx 文本浏览器、部分爬虫直读 HTML（不执行 JS）、或老旧嵌入式设备

注意：<noscript> 对以下情况完全无感：

• <script src="app.js"> 返回 404 或超时
• CSP 策略阻止内联脚本但允许外部脚本执行
• React hydrate 失败、fetch() 报错、addEventListener 绑定失败
• JS 引擎运行中但某行代码抛出 ReferenceError

<noscript> 必须放在 <body> 才能被用户看到

虽然 HTML5 允许它出现在 <head>，但该位置只接受元数据标签（<link>、<style>、<meta>），不能放提示文字或按钮。

立即学习“前端免费学习笔记（深入）”；

常见错误写法：

Browser Js

轻量级CDP浏览器控制，适用于AI代理。相较于内置浏览器工具，token消耗降低3‑10倍，仅在浏览时使用。

下载

• 把 <noscript><p>请启用 JS</p></noscript> 放在 <head> —— 用户根本看不到
• 塞在 <script> 标签内部 —— 浏览器直接忽略整块
• 作为自闭合标签 <noscript/> —— 无效语法，不解析

正确做法是紧贴功能区块插入，例如：

<form id="login-form">
  <input name="username">
  <button type="submit">登录</button>
</form>
<noscript><p>登录需启用 JavaScript</p></noscript>

别指望 <noscript> 补功能，它只负责提示和静态降级

它不参与 DOM 构建流程，无法绑定事件、不响应 CSS 选择器（除非用 style 属性内联）、不影响可访问性检测评分。

真正有效的降级不是加一行提示，而是提供可用替代：

• 动态表单提交 → <form method="post" action="/login"> + 后端处理
• 图表组件缺失 → <img src="chart-static.png" alt="销售趋势图">
• 地图交互不可用 → 显示地址文本 + 指向 Google Maps 的链接

如果核心操作全靠 onclick 和 event.preventDefault()，那加再多 <noscript> 也救不了功能断链。

构建工具注入 <noscript> 容易误触发

Webpack/Vite 插件自动往模板里塞提示，容易踩坑：

• JS 是 defer 或 type="module" 加载时，<noscript> 在解析阶段就已渲染，哪怕几毫秒后 JS 成功执行，用户仍会闪见提示
• 放在 <body> 开头但未紧跟关键内容，用户可能白屏几秒才看到提示

建议手动控制位置：只在具体依赖 JS 的模块旁插入，且内容聚焦「当前模块的静态替代」，而非全局提示。