Why can a "Parse HTML" event in Devtools Timeline consist of mostly Script execution?

Question

When I look into the Timeline tab of Chrome's DevTools and see a "Parse HTML" event I have always assumed that task is related to mostly non-javascript tasks such as converting a blob of HTML into DOM-nodes.

But when I took a look at the example image below I'm seeing an event that takes 1.07 seconds, is called "Parse HTML" (the blue bar) event and the majority of time spent on this task is labelled as "Scripting".

I don't quite get this. How is an event called "Parse HTML" mostly consisting of script execution?

Here are the details for that specific event

To investigate where the origin of this parsing is coming from. So I clicked the anchor link VM16602:6161 and expected to be linked to a block of HTML.

But to my surprise this links a script-tag.

I'm confused.

1. Why does a "Parse HTML" event point to the contents of a script-tag? I know that a SCRIPT tag is a part of HTML that is parsed by the HTML-parser but I figured DevTools would separate HTML-parsing from JS-parsing to help us know the difference.

2. What does it mean that the Timeline displays "Parse HTML" above a bunch of "Evalute script" event? Does this mean there are separate events running in parallell? Or does it mean that the "Parse HTML" event is just an "Umbrella event" which acts as a wrapper for all these scripting events?

Looking further into the details of my event it seems as though Chrome is presenting the Scripting events as being "parts" of the ParseHTML-event...

Does in fact, parsing a <script> block always result in a ParseHTML-event which mainly consists of script evaluation events? Or whut am I looking at here?

Answer 1

When you include inline JS on your HTML, or use an external script in the usual way:

<script src="foo.js"></script>

This is a render-blocking operation. The browser must execute this script to completion before it can continue parsing the HTML. That's why you see JS execution within the Parse HTML event. The Parse HTML event triggered the JS execution (because the script was included in the HTML) and the Parse HTML event wasn't complete until all those scripts executed, as well tokenizing, lexing, etc.

Use async to defer scripts so that they don't block the page load:

<script src="foo.js" async></script>

Or refactor the inline-injected scripts so that they only fire on load, or some later event.

See Adding Interactivity With JS from the Critical Rendering Path docs to learn more about optimizing page load.