Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

enter image description here

Here are the details for that specific event

enter image description here

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...

enter image description here

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?

like image 500
Drkawashima Avatar asked Apr 12 '17 14:04

Drkawashima


1 Answers

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.

like image 192
Kayce Basques Avatar answered Nov 16 '22 22:11

Kayce Basques