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.
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.
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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With