Resource Loading Trace
link 与 script 位置验证
故意让 head 中的样式表延迟 700ms、图片延迟 1100ms，用时序图观察解析阻塞、defer 执行时机和 window load。
CSS +700ms
defer +200ms
image +1100ms
- head 中的 stylesheet 会尽早被发现，并且会影响后续脚本执行和首次渲染。
- 无
async/defer的外链脚本会阻塞 HTML 解析和自身执行；但浏览器的 preload scanner 仍可能提前发现并下载后面的脚本资源。 defer脚本在 DOM 解析完成后、DOMContentLoaded前执行。- 写在
</body>后的脚本会被浏览器容错放回 body，但这不是规范结构。 - 图片不会阻塞 DOM 解析，但会推迟
window load。
左侧是本页 HTML 中的关键节点，右侧是同一次加载得到的双轴时间图；连线只表示代码位置和资源行的对应关系，不表示主解析器已经执行到该节点。
HTML 位置
检测节点
<head><link rel="stylesheet" href="slow-style.css"><script src="blocking.js"></script><script defer src="defer.js"></script></head><body><img src="slow-image.svg"></body>
读图规则：左侧节点说明资源写在 HTML 的哪个位置；右侧 X 轴是时间，Y 轴是资源或事件。长色条表示网络下载耗时，短竖条表示脚本执行或页面事件，虚线表示同一时间轴上的等待区间。`blocking.js` 的下载条可能很早出现，是因为现代浏览器会用 preload scanner 提前扫描后续资源；但它的执行竖条仍在 CSS 完成后，说明“提前下载”不等于“提前执行”。
