关键资源是影响首屏像素生成的HTML、首屏必需CSS和初始化首屏交互必需JS；可通过Chrome Performance面板中“Recalculate Style”/“Layout”触发判断CSS是否关键，或依据parser发起的网络请求识别。
关键渲染路径里哪些资源算“关键”？
不是所有 <link rel="stylesheet"> 或 <script> 都阻塞渲染——只有那些被浏览器判定为“影响首屏像素生成”的才算。Chrome DevTools 的 **Performance 面板 → Main 线程轨迹** 中，若某 CSS 文件加载后紧跟着 “Recalculate Style” 和 “Layout”，它就是关键 CSS；若某 JS 执行前 DOM 已就绪但页面仍白屏，大概率是它在等未加载的依赖模块。
常见误判点：
-
async脚本不会阻塞解析，但它加载完成就执行，可能早于关键 CSS 解析完毕，导致样式未生效就操作 DOM -
defer脚本虽按顺序执行，但不等待其内部import()的 Promise，vendor.js里导出的函数可能还没准备好，app.js就已调用 - 带
media="print"的 CSS 不是关键资源，但若漏写 media 或写成media="(min-width: 0)"，浏览器仍会同步加载并阻塞
如何自动识别 HTML 中的真实依赖链？
靠人工数 <script> 标签顺序或看 import 语句容易漏掉运行时依赖。真正起作用的是浏览器实际加载和执行时序，需从网络层和执行层双视角采集。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
performance.getEntriesByType("resource")过滤出initiatorType === "parser"的条目，这些是 HTML 解析阶段触发的关键请求 - 对每个 JS 资源，检查其
transferSize和duration，若duration明显长于下载时间，说明执行耗时高（可能是初始化逻辑或依赖等待） - 监听
document.addEventListener("readystatechange", ...)，记录document.readyState变为"interactive"和"complete"的时刻，再比对各脚本的onload时间戳，能暴露 defer 脚本间的隐式竞争 - 不要只信
import.meta.url—— Webpack/Vite 构建后路径常被重写，真实依赖应以performance.getEntriesByName("xxx.js")[0].name为准
监控依赖链断裂的最小可行信号
依赖链失效往往不报错，而是静默失败：按钮没反应、图表空白、状态未同步。靠 console.error 捕获远远不够。
必须埋点的三类信号：
- 当
document.querySelector(".chart-container")存在但window.echarts为undefined，说明预加载的echarts.min.js没生效（常见于preload+deferhref 不一致） - 检测
getComputedStyle(document.documentElement).getPropertyValue("--theme-color")是否为空字符串，可快速发现关键 CSS 加载失败或未应用 - 对动态 import 场景，用
Promise.race([import("mod.js"), new Promise(r => setTimeout(r, 3000))])设超时，避免无限挂起 - SSR 页面中，若
window.__INIT_DATA__存在但 React 组件未 hydrate，大概率是 hydration 脚本在数据注入前就执行了——此时DOMContentLoaded不可靠，得监听document.getElementById("root")._reactRootContainer是否存在
为什么自动化梳理总在多层构建后失效？
Webpack 的 SplitChunksPlugin、Vite 的 build.rollupOptions.output.manualChunks 或 SSR 的代码分割，都会把一个逻辑模块拆成多个物理文件，且文件名带 hash。HTML 里写的 src="app.a1b2c3.js" 和实际运行时 import 的 "./chunk-xyz.js" 不是一回事。
真正能追踪到端到端依赖的，只有构建产物分析 + 运行时采样组合：
- 构建阶段用
rollup-plugin-visualizer或source-map-explorer输出依赖图谱，但仅限静态分析 - 运行时在
loadScript工具里加performance.mark(`load-${basename}`)，再用performance.measure计算从 mark 到实际执行的时间差 - 禁止在
<head>里混用preload和prefetch同一资源——浏览器可能把 prefetch 当作低优先级任务，导致 preload 失效 - CDN 上的资源若开启 SRI（Subresource Integrity），但哈希值未随构建更新，会导致资源加载成功却校验失败，静默丢弃——这种断裂完全不会出现在 Network 面板里
