Just typing in an <Input /> is slow, need help debugging

Performance
1 
DEBUG: -------------------------------
index.js:194 DEBUG: Ember           : 3.18.1
index.js:194 DEBUG: Ember Data      : 3.18.0
index.js:194 DEBUG: Model Fragments : 5.0.0-beta.0
index.js:194 DEBUG: -------------------------------

So I’m working on a fairly large application, and clicking around the app is starting to feel sluggish. Clicking on a button, typing in <Input /> (not regular <input />) can cause 300+ms delays. I’m trying to understand the stack trace from the “Performance” tab in Chrome, but really can’t understand anything. Digging through the stack trace of the template JIT compiler(?), it’s really hard to grasp.

Looking at the graph, it just seems to be doing A LOT of stuff. How can I understand what’s causing all this? Going through the stack trace ends up in a loop of “MonomorphicTagImpl” etc, revisions, computes. It’s hard to see what the tag means?

It seems to be bumping up the revision value constantly. Does that mean I’m not computing a variable properly? Nothing is changing in the DOM. Why does it need to revalidate the entire tree constantly?

Screenshot 2020-08-31 at 14
Screenshot 2020-08-31 at 142598×4538 1020 KB

image
image2590×1148 420 KB

2

An update here: With help from @nullvoxpopuli in Ember Discord we tracked the issue down to queryParams that were @tracked.

Apparently it’s a known issue, but hard to make a reproduction of.

3

I’ve run into something like this. I had to make sure I the chain of @tracked dependencies didn’t include too much unnecessary computation.

On top of that, having the inspector open does slow things down a lot more.