为何Edge性能时间线显示资源请求早于HTML解析？

你观察到的情况是正常的，并不是误解了时间线——这是现代浏览器的**预加载扫描器（Preload Scanner）**在发挥作用。

原理说明 #

浏览器收到HTML字节流后，并不会等到完整解析完整个HTML文档才去请求资源。它会启动一个独立的预加载扫描器，在HTML逐步解析的同时，快速扫描字节流中的资源引用（比如<link>、<script>、<img>等标签），提前发起资源请求。这个机制的目的是并行加载资源，减少页面加载的总耗时，是现代浏览器的标准性能优化手段。

对应你的场景 #

你的示例HTML中，<link rel="stylesheet">标签位于<head>内，预加载扫描器在HTML还没进入正式解析阶段时，就已经从字节流里识别到了这个CSS资源的URL，直接触发了Send Request操作，所以在Performance面板里会看到这个请求早于HTML解析启动。

你的示例代码 #

index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3schools30.css"/>
</head>
<body>
Performance testing
<script src="index.js"></script>
</body>
</html>

index.js

setTimeout(() => {}, 1000)

简单来说，预加载扫描器是浏览器在后台默默做的性能优化，让资源请求和HTML解析并行进行，所以才会出现你看到的请求早于解析的时间线。

内容的提问来源于stack exchange，提问作者Sevla