在开发者工具Elements面板中按Ctrl+F（Windows）或Cmd+F（Mac）搜索即可高亮并展开该区域，所见为当前DOM状态，含JS动态插入内容。
怎么在开发者工具里快速定位
直接打开浏览器开发者工具（F12 或右键 → 检查），切换到 Elements 面板，按 Ctrl+F（Windows）或 Cmd+F（Mac）搜索 ，就能高亮并展开整个 区域。注意：这里看到的是当前 DOM 状态，不是原始 HTML —— 如果 JS 动态插入了 <meta> 或 <link>，它们也会出现在这里。
document.readyState 能不能反映
不能。document.readyState 是文档级状态，和 是否“加载完”没有直接对应关系：
-
loading：和都在解析中，但此时的大部分内容（如<title></title>、<meta charset>）其实已生效 -
interactive：DOM 构建完毕，全部解析完成，所有<script></script>（非async/defer）已执行，<link rel="stylesheet">也基本就绪（但 CSSOM 可能未完全构建） -
complete：不表示“刚加载完”，而是整个页面资源（含图片、字体、异步脚本）全部 fetch 完毕
所以，想确认 结构是否稳定，看 interactive 就够了；但若要等 <link rel="stylesheet"> 真正应用、样式可被 getComputedStyle() 读取，得监听 load 或用 document.fonts.load() 等更细粒度信号。
哪些
常见踩坑点集中在三类资源上，它们在 中声明，但实际就绪时机远晚于 DOM 解析：
HISUI 前端框架开发指南（IRIS版）
下载
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
立即学习“前端免费学习笔记（深入）”；
-
<link rel="stylesheet" href="main.css">：即使interactive已触发，CSS 文件可能还在下载或解析中，getComputedStyle(el).color可能返回空字符串或默认值 -
<link rel="preload" as="font" href="font.woff2">+<style>@font-face{...}</style>：字体文件下载完 ≠ 渲染就绪，需用document.fonts.load('MyFont')显式等待回填 -
<script async src="analytics.js"></script>：它不会阻塞解析，也不会影响readyState，但它的执行完成时间完全不可控 —— 不能靠complete去假设 analytics 已初始化
调试
不要只盯着一个事件或状态。真实工程中，应组合判断：
- 用
document.addEventListener('readystatechange', () => { if (document.readyState === 'interactive') { ... } })确保 DOM 和结构可用 - 对关键 CSS，加
document.addEventListener('DOMContentLoaded', ...)并在回调里检查document.styleSheets的cssRules是否非空（注意跨域样式表会抛 SecurityError） - 对字体，必须显式调用
document.fonts.load('font-family-name')，它返回 Promise，比任何 readyState 都可靠 - 避免在
interactive阶段读取img.naturalWidth或调用video.play()—— 这些依赖资源加载，跟关系不大，但新手常混为一谈
真正难的不是“看到 ”，而是判断它里面声明的那些东西——尤其是样式、字体、异步脚本——到底有没有真正起效。这个差值，就是线上偶发白屏、样式闪动、字体 fallback 的根源。
