HTML文档结构是混合应用WebView渲染层的强制契约，缺失DOCTYPE、未闭合html标签、遗漏body或大小写错误等结构问题会导致document.body为null、JSBridge注入失败及SEO失效。
HTML文档结构不是“可选配”，而是混合应用里 WebView 渲染层的强制契约——它直接决定 JS 能否拿到正确的 DOM、CSS 是否生效、以及 native 容器能否正确注入 bridge。
WebView 加载时解析失败，document.body 为空或 undefined
这是混合应用中最常被误判为“JS 执行太早”的问题，实际根源往往是 HTML 结构不合法：
-
<!DOCTYPE html>缺失或写成<!doctype html>（大小写敏感），某些 Android WebView 版本会降级到怪异模式，document.body可能延迟初始化甚至为 null -
<html>标签未闭合，或意外嵌套在另一个<html>内（常见于模板拼接错误），导致浏览器丢弃后续节点 -
<body>被遗漏，或被写成<BODY>（部分旧版 iOS UIWebView 对标签名大小写敏感） - 脚本放在
<head>里且没加defer或async，而 DOM 尚未构建完成，document.body确实还没生成
Hybrid bridge 注入失败，window.JSBridge 始终 undefined
Native 注入 JS bridge 的时机依赖于页面生命周期事件，而这些事件触发的前提是 HTML 结构完整：
- iOS WKWebView 的
webView.evaluateJavaScript(_:completionHandler:)通常在WKNavigationDelegate.webView(_:didFinish:)后执行，但若<html>或<body>缺失，该回调可能不触发或延迟 - Android WebView 的
addJavascriptInterface()要求页面已加载并完成初始 DOM 构建；结构错误会导致onPageFinished()触发异常或不触发 - 常见陷阱：在
<head>中提前执行 bridge 初始化逻辑，但此时<body>还没解析，document.body.appendChild()报错，bridge 对象挂载失败
SEO 和预渲染失效，服务端返回的 HTML 被识别为“空页”
混合应用虽以 App 形式分发，但分享链接、微信内嵌页、PWA 安装页仍依赖服务端返回的 HTML 内容。结构缺陷会直接破坏抓取：
立即学习“前端免费学习笔记（深入）”；
- 缺少
<title>或<meta name="description">，导致社交平台卡片无标题/摘要 -
<html lang="zh-CN">缺失，影响语义识别与语音朗读支持 - 主体内容全靠 JS 动态插入，而服务端返回的 HTML 中
<body>内只有空<div id="app"></div>，搜索引擎认为无实质内容 - 未声明
<meta name="viewport">，移动端渲染宽度异常，间接导致首屏内容不可见，被判定为低质量页
真正难调试的不是 JS 逻辑，而是 HTML 是否被 WebView 当作“有效文档”来对待——一个缺失的 </html> 或错位的 <head>，就能让整个 bridge、路由、甚至 Vue/React 的 mount 阶段静默失败。别跳过验证 document.documentElement 和 document.body 是否存在，这是混合环境里最廉价也最有效的第一道防线。
