前端HTML页面加载“超时”多为DOM构建阻塞而非网络真超时；需通过document.readyState状态、Network面板Waterfall分析及media="print"临时验证法，精准定位CSS或同步脚本阻塞源。
前端 HTML 页面加载“超时”，绝大多数时候根本不是真超时，而是 DOM 构建被卡住——你看到的“转圈”其实是浏览器在等某个没加载完的 CSS 或同步执行的 script，而不是网络层真断了。
怎么看是不是真网络超时？先盯死错误码和 Network 时间轴
浏览器报错文案不是装饰，是第一诊断线索：DNS_PROBE_FINISHED_NXDOMAIN 说明域名根本没解析出来；ERR_CONNECTION_TIMED_OUT 表示 TCP 连接发出去后 20–30 秒没回包；ERR_SSL_PROTOCOL_ERROR 是 TLS 握手失败；而 ERR_EMPTY_RESPONSE 或长时间白屏但无报错，大概率是 HTML 解析被阻塞。
打开 Chrome DevTools → Network 面板，刷新页面，重点关注三件事：
- 查看
document请求的 Waterfall：如果它下面紧跟着一个耗时长、起始时间早的.js或.css，且该资源状态是Pending或Stalled，那就是阻塞源 - 右键点击
document行 → “Copy” → “Copy all as HAR”，用 HAR Analyzer 查看各阶段耗时分布，确认卡点在 DNS / Connect / SSL / TTFB 还是 Content Download - 禁用缓存（勾选 Disable cache）再试一次，排除本地缓存干扰；若禁用后变快，说明缓存策略或资源版本管理有问题
为什么用 Network 面板抓不到“假超时”？因为脚本执行不发网络请求
很多“加载慢”根本没走网络——比如一个内联 <script>fetch('/api/user').then(...)</script> 在 里，它不会出现在 Network 列表中，但它会阻塞 DOM 解析，导致 document.readyState 卡在 loading 状态，DOMContentLoaded 永远不触发。
立即学习“前端免费学习笔记（深入）”；
验证方式很简单：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 在 Console 执行
document.readyState，反复按回车：如果长期是"loading"，说明 HTML 解析中断（可能是 malformed HTML 或document.write()） - 如果是
"interactive"却迟迟不变成"complete"，重点查里的<link rel="stylesheet">和紧邻它的<script></script> - 临时把疑似阻塞的
<link>改成<link rel="stylesheet" media="print">，再刷新——如果DOMContentLoaded明显提前，就是它
Network 面板里的“拦截器”怎么用？别只盯着 XHR
Chrome 的 Network → Filter 输入 is:running 可以快速定位还在 pending 的请求；但更关键的是启用「Disable cache + Preserve log + Offline 模式对比」三连操作：
-
Preserve log开启后，跳转、刷新、异常中断都不会清空记录，适合排查单页应用路由切换后的资源缺失 - 勾选
Offline，观察哪些资源直接 404 或 fallback 失败——这常暴露未声明fallback的<link rel="preload">或字体资源 - 右键某条请求 → “Block request URL”，可模拟某 CDN 域名完全不可达场景，验证降级逻辑是否生效（比如字体 fallback 到系统字体）
注意：Block request URL 对 data:、blob:、内联脚本无效，它只拦截 HTTP(S) 请求。
移动端真机调试时 Network 面板为什么“失灵”？
手机浏览器访问开发机 localhost，其实连的是它自己的回环地址，根本到不了你的服务。Network 面板里看不到任何请求，不是代码问题，是网络配置没对。
必须做三件事：
- 开发机启动服务时绑定
0.0.0.0:3000（不是默认的127.0.0.1:3000） - 查开发机局域网 IP（macOS/Linux 用
ifconfig | grep "inet "，Windows 用ipconfig），确保手机和电脑在同一 WiFi 下 - 手机浏览器访问
http://192.168.x.x:3000，并关闭开发机防火墙或放行对应端口
如果要测 HTTPS 或 WebSocket，ngrok http 3000 是最省事的选择——免费版每小时换域名，但能绕过所有本地网络限制，且真机 Network 面板能完整捕获。
真正难调的从来不是“连不上”，而是“连上了却不动”。DOM 构建阻塞没有错误提示，也没有网络日志，它安静地卡在那里，靠的全是开发者对 HTML 解析流和资源加载顺序的直觉与验证习惯。
