Search code examples
performancemicrosoft-edgetimelineweb-inspector

Why does Edge performance timeline shows that assets are being requested before HTML parsing?

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.

I'm using a simple example. Here's 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:

setTimeout(() => {}, 1000)

Am I misunderstanding the timeline or there is a circunstance where this happens?

Solution

  • I think it is related with a feature called "preload scanner" on Chromium browsers. 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.