script标签加载失败时页面结构仍可渲染但功能残缺，因浏览器静默忽略错误，依赖脚本的代码会报ReferenceError；需解耦DOM操作与UI逻辑、用动态创建script+onerror监听实现降级，defer脚本失败不影响DOM安全性。
script 标签没加载成功时页面还能用吗
不能默认保证。外部脚本 src 加载失败（404、CORS、网络中断、CDN 不可用）时，浏览器静默忽略，后续依赖它的代码大概率报 ReferenceError 或直接不执行，但 HTML 本身仍会继续渲染——这意味着结构还在，功能已残缺。
降级处理的核心不是“让它一定成功”，而是“让它失败时不拖垮整个页面”。常见错误是把所有初始化逻辑堆在单个 main.js 里，一旦它挂了，document.getElementById("login-btn") 绑定事件的代码根本不会运行，按钮点不动，表单无法提交。
- 优先把 DOM 操作类逻辑（如按钮监听、表单校验）和纯 UI 渲染逻辑解耦，确保无 JS 时基础表单仍能 submit 到服务端
- 避免在
中阻塞式加载关键业务脚本；改用defer+ 显式错误监听，或动态插入 +onerror回调 - 对非核心功能（如埋点、推荐模块）使用“软加载”：脚本失败就跳过，不 throw 错误，也不中断主流程
如何监听 external script 加载失败
原生 <script defer src="a.js"></script> 不提供失败回调，必须换方式。最可靠的是动态创建 script 元素并绑定 onerror：
const script = document.createElement('script');
script.src = '/assets/app.js';
script.onerror = () => {
console.warn('app.js 加载失败，启用降级逻辑');
// 例如：显示提示、启用简化版交互、上报监控
};
document.head.appendChild(script);
注意两点：onerror 必须在 src 赋值**之后**设置，否则可能错过错误；多个脚本需分别监听，defer 或 async 的 <script> 标签无法统一捕获失败。
立即学习“前端免费学习笔记（深入）”；
- IE9+ 支持
onerror，旧 IE 需 fallback 到定时检查全局变量是否存在（如typeof myApp !== 'undefined'） - 若脚本有跨域需求，需加
crossorigin="anonymous"，否则onerror拿不到详细错误信息 - Webpack/Vite 构建产物可配合
import().catch()做 code-splitting 级别的降级，但这是运行时逻辑，不适用于传统script标签
defer 脚本失败后 DOM 还安全吗
安全。只要脚本没执行，就不会碰 DOM——这是 defer 的底层保障：它只影响执行时机，不改变脚本内容本身。即使 app.js 404，DOMContentLoaded 事件仍会正常触发，document.body 依然可读写，其他未依赖它的脚本照常运行。
真正危险的是“以为它会执行，结果没执行”的隐性假设。比如：
- 在
<body>末尾写了<script defer src="init.js"></script>，又在另一个内联脚本里直接调用initForm()—— 这个调用必然失败，因为init.js没加载，函数根本不存在 - 用
defer加载 jQuery，但后续某个<script>没加defer，试图用$—— 执行顺序失控，大概率报错
所以降级的关键不是防失败，而是破除“脚本一定存在”的幻觉：所有对外部脚本的调用，都应加存在性判断，或用 Promise 封装加载过程再 .then。
localStorage 记录加载状态有用吗
有用，但仅限特定场景。比如你有一套按需加载的模块系统，用户点击“报表”才加载 chart.js，且希望失败后不再重试（避免反复请求坏链接），这时可以用 localStorage 存一个标记：
if (localStorage.getItem('chart-js:loaded') !== 'true') {
const s = document.createElement('script');
s.src = '/js/chart.js';
s.onload = () => localStorage.setItem('chart-js:loaded', 'true');
s.onerror = () => localStorage.setItem('chart-js:loaded', 'error');
document.head.appendChild(s);
}
但要注意：localStorage 是同步阻塞 API，高频读写会影响主线程；同源限制意味着无法跨子域共享状态；且它不解决首次失败问题，只是防止重复失败。
更轻量的做法是用内存变量缓存加载 Promise，同一页面生命周期内多次调用返回同一个 Promise 实例——既避免重复请求，又不用操作存储。
