静态html兜底页必须是构建时生成的完整独立文件，禁用所有js、外部资源和动态注入，服务端需主动返回而非重定向，确保js失效时仍可零依赖渲染。
静态HTML兜底必须独立于JS执行逻辑
动态脚本失效时，浏览器不会自动回退到静态HTML——<noscript></noscript>只对禁用JS的用户生效，对JS加载失败、执行报错、网络中断等场景完全无效。真正的兜底页必须是完整、自包含、无需任何JS参与即可渲染的独立HTML文件。
- 兜底页不能依赖
document.write、innerHTML或任何DOM操作，所有内容必须在初始HTML中硬编码 - 禁止使用
<script></script>标签（哪怕空标签），连<script src=""></script>都算违规 - 所有样式必须内联写在
<style></style>里，禁用<link rel="stylesheet">和外部字体 - 图片用
data-uri或同域绝对路径，避免因CDN挂掉导致空白
构建阶段就要生成可直接交付的兜底HTML
别指望运行时用JS拼接或fetch fallback——那本身就会失效。兜底页必须在CI/CD构建时生成并部署为静态资源，路径固定、内容确定、无动态变量。
- 用
posthtml-include或html-webpack-plugin在构建时把/partials/header.html、/partials/footer.html合并进fallback.html，而不是靠JS运行时加载 - 片段文件里禁止出现
或，否则会嵌套出错 - 所有
data-属性、class名、id必须是确定值，不能由JS注入或权限控制生成 - 构建后用
npx html-validate fallback.html校验语法，确保没有未闭合标签或非法结构
服务端必须主动拦截并返回兜底页，而非重定向
<meta http-equiv="refresh">和HTTP 302重定向在弱网或证书异常时大概率失败，且多一次往返。服务端降级的关键是“请求还没进业务层，就决定返回什么”。
- Nginx配置需启用
proxy_intercept_errors on，并绑定error_page 502 503 504 /fallback.html - Spring Boot推荐用
@ControllerAdvice捕获全局异常，用ResponseEntity<string></string>直接返回fallback.html文件内容（读取classpath:/static/fallback.html） - WebFlux下注意
WebExceptionHandler注册顺序：必须在ResponseStatusException之前，否则4xx/5xx会被提前吞掉 - 兜底页响应头必须设
Content-Type: text/html; charset=utf-8，禁用Cache-Control: no-cache以外的缓存策略，防止CDN缓存错误版本
动态模块插入前必须做HTML结构校验
即使主页面有兜底，动态插入的HTML片段仍可能破坏整体结构。每次innerHTML = htmlStr前，都要验证它是否能被安全解析。
- 用
new DOMParser().parseFromString(htmlStr, 'text/html')解析，检查doc.body.children.length > 0，若为0且htmlStr.trim()非空，说明结构严重损坏，直接跳过插入 - 禁止直接插入含
<script></script>的片段——浏览器不执行，还可能触发CSP拦截；逻辑应拆到独立JS模块中按需加载 - 富文本类内容若需保留HTML，必须用
{{{html}}}（Handlebars）等显式非转义语法，但前提是来源可信且已做过XSS过滤 - 插入后立即检查容器
offsetHeight是否为0，若为0可能是CSS隐藏或结构塌陷，需触发备用渲染逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
