Chrome profiler - Why do functions sometimes stop for a little time?

Question

Here is a picture of my web execution captured by Chrome Performance Devtools:

I notice that functions will be stopped many times during execution, when my web functions are stopped Chrome executes some RegExp operations (as shown in the picture). I don't understand what this is, and why it happens. Please help explain, thanks.

Update: here is a function which is also executed in the same manner:

Answer 1

What you describe

The way you describe the problem it sounds like you think the JavaScript virtual machine is putting the functions on hold (stopping them) while they are executing (i.e. before they return) to do something else and then resumes the functions.

The image you are showing does not suggest that at all to me.

What I'm seeing

The VM executes:

• callback, which calls
• some function whose name is hidden by a tooltip, which calls:
• fireWith, which calls:
• fire, which calls:
• etc...

Then the deepest function returns, and the one that called it returns, and so on and so forth until fire returns, fireWith returns, the function whose name we cannot read returns, and callback returns.

Then the VM runs a RegExp function, and it calls a function named callback again, and the whole thing starts anew. In other words, the second column with callback and the rest is a new invocation of the functions. The functions are not "stop[ping] for a little time": they are called multiple times.

I see this all the time in libraries that respond to events. They typically will loop over event handlers to call them. Given a complex enough library, there'a fair amount of glue code that may sit between the loop that calls the handlers and your custom code so there's a lot of repetitive calls that show up in profiling.