How to read Evaluate Script timings in Chrome profiling/performance tab

I've been told that my script is blocking the main thread on my client's site.

It's marked as <script async...> so it should not be a network block.

I ran the Chrome profiler and I don't really understand what I'm looking at, despite googling for explanations.

Here's a screenshot of the script in question:

I don't understand which part of the entire blue block is the "thread blocking part"

Here's the associated Bottom-Up table:

From the first image, the "thin line" spans from around 500ms to around 900ms, which is around 400ms of time, but in the Bottom-Up table, it says the total "Evaluate Script" time is 184.5ms.

So can I assume the "blocking" time of the script should be taken from the Bottom-Up table, coming up to be 184.5ms?

Solution 1:

1. On the first screenshot we are looking at Network section. You can read how to make sense of it here.
   In short:

   • The left line is everything up to the Connection Start group of events, inclusive. In other words, it's everything before Request Sent, exclusive.
   • The light portion of the bar is Request Sent and Waiting (TTFB).
   • The dark portion of the bar is Content Download.
   • The right line is essentially time spent waiting for the main thread

   So it's not about execution time.

2. I myself don't completely understand yet what the Bottom-Up tab of the Network section mean... Maybe it doesn't even have a direct connection to network request:

   The Bottom-Up tab only displays activities during the selected portion of the recording

   during doesn't necessary mean caused by.

3. But anyway it's probably not what you're looking for. Take a look at the Main section, right after the end of the network request when finally waiting for the main thread is over and it's free and ready to execute the script you'll probably see a long bar - that's the time when your script is blocking the main thread.
   E.g look at the screenshot

   • First lux.js is loaded (from the cache in this particular case).
   • Then it waits for the main thread (from 3117ms until 3128ms).
   • Then a Task starts (it is selected and pointed to with the small arrow, the big arrow points to the fact that lux.js is indeed begins its execution)
   • Some time is spent on Compile Script
   • And only then you can see a flame chart of script execution (in red circle)

   You can read more about this on the same page here

Also some extra info and insights on optimization an performance monitor usage can be found here and in subsequent articles.