为什么 Edge 性能时间线显示在 HTML 解析之前正在请求资产？

Question

From what I know, the browser can only request the assets (JS, CSS) after parsing the HTML. But analyzing the "Performance" tab on Edge's DevTools, the "Send Request" for the w3schools30.css stylesheet happens before the parsing is even started, as we can see indicated by the green arrow and other data in this image .据我所知，浏览器只能在解析 HTML 后请求资产（JS，CSS）。但是分析 Edge 的 DevTools 上的“性能”选项卡， w3schools30.css样式表的“发送请求”发生在解析之前开始，正如我们在这张图片中看到的绿色箭头和其他数据所指示的那样。

I'm using a simple example.我正在使用一个简单的例子。 Here's index.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>

And the index.js :和index.js ：

setTimeout(() => {}, 1000)

Am I misunderstanding the timeline or there is a circunstance where this happens?我是不是误解了时间线，还是在某些情况下会发生这种情况？

Answer 1

I think it is related with a feature called "preload scanner" on Chromium browsers.我认为这与 Chromium 浏览器上称为“预加载扫描仪”的功能有关。 This article says:这篇文章说：

A preload scanner's role is speculative, meaning that it examines raw markup in order to find resources to opportunistically fetch before the primary HTML parser would otherwise discover them.预加载扫描器的角色是推测性的，这意味着它会检查原始标记，以便在主要 HTML 解析器发现资源之前找到机会获取资源。

为什么 Edge 性能时间线显示在 HTML 解析之前正在请求资产？

问题描述

1 个解决方案

解决方案1
0 已采纳 2023-02-01 06:32:32

为什么 Edge 性能时间线显示在 HTML 解析之前正在请求资产？

问题描述

1 个解决方案

解决方案1 0 已采纳 2023-02-01 06:32:32

解决方案1
0 已采纳 2023-02-01 06:32:32