HTML页面异常恢复需提前设计降级路径：白屏先查协议与报错；JS卡死用分片、防抖、Web Worker；资源加载失败加onerror fallback；表单提交失败用localStorage缓存输入。
HTML 页面本身不会“崩溃”，但用户会遇到页面白屏、脚本卡死、样式错乱、资源加载失败、表单提交无响应等现象——这些是实际开发中必须面对的“异常恢复”问题。核心思路不是等错误发生再补救，而是提前设计降级路径和反馈机制。
页面白屏或 DOM 渲染失败怎么快速定位
白屏不等于代码没运行，往往是解析中断或 JS 报错阻塞了后续执行。先看浏览器地址栏是否显示 file:// 或 http://localhost：如果是本地双击打开，file:// 协议下多数 AJAX、import、fetch 会直接被浏览器拦截，控制台报 CORS error 或 Failed to load module script，这不是代码 bug，是协议限制。
- 用
npx serve或 VS Code 的 Live Server 启动本地 HTTP 服务，让页面走http://协议 - 打开开发者工具的
Console面板，看是否有红色报错；若有，点开堆栈，定位到具体行号和文件 - 在
Elements面板检查是否存在，如果连根节点都没渲染出来，大概率是开头缺或里有未闭合的<script></script> - 临时注释掉所有
<script></script>标签，确认是否白屏消失；若恢复，则逐个放开，找出破坏性脚本
JS 执行卡死或无限循环如何避免影响整个页面
一段死循环（比如 while(true){}）或同步阻塞操作（如超大数组 .sort()）会让主线程冻结，页面完全无法交互。浏览器不会主动终止它，只能靠用户强制刷新。
- 避免在主线程做耗时计算：把大任务拆成微任务，用
setTimeout或requestIdleCallback分片执行 - 对用户输入类操作（如搜索框实时过滤）加防抖，防止高频触发重计算
- 关键逻辑加上执行时间检测：
const start = performance.now(); /* do work */; if (performance.now() - start > 50) console.warn('long task'); - 真要跑重任务，用 Web Worker 搬离主线程，但注意 Worker 不能直接操作 DOM
外部资源加载失败时怎么优雅 fallback
<script src="xxx.js"></script>、、
- 给
<script></script>加onerror处理：<script onerror="console.error('JS load failed'); fallbackInit()"></script> - 给
onerror并替换为占位图：
- CSS 加载失败更隐蔽，可用
document.styleSheets检查cssRules是否为空，或监听load事件后延时验证样式是否生效 - 对 CDN 资源，准备备用源：
<script src="https://cdn-a/jquery.js" onerror="this.src='https://cdn-b/jquery.js'"></script>
表单提交失败后如何保持用户输入不丢失
用户填了半页表单，点击提交，结果网络超时或后端返回 500，页面刷新或跳转，所有输入清空——这是最伤用户体验的“恢复失效”场景。
- 提交前用
localStorage缓存字段值：input.addEventListener('input', () => localStorage.setItem('form-name', input.value)) - 提交失败后，在
catch或回调里自动还原：input.value = localStorage.getItem('form-name') || '' - 配合
autocomplete="on"和语义化name属性，让浏览器原生表单恢复机制也能起作用 - 禁用提交按钮并显示 loading 状态，防止重复点击导致多次请求或状态混乱
真正难的不是写恢复逻辑，而是判断哪些地方值得加——比如一个静态介绍页，没必要为图片加载失败写全套 fallback；但一个银行转账表单，连输入框失焦时的 localStorage 快照都得考虑。恢复方案的粒度，取决于这个页面对用户有多重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
