How would you diagnose whether a slow interaction is caused by JavaScript execution, layout thrashing, or rendering work?

Direct answer

Profile the interaction in browser performance tooling, identify long main-thread tasks, inspect the breakdown of scripting/style/layout/paint work, then correlate expensive call stacks and forced layout events with the application code that triggered them.

Start with measurement rather than guessing from source code. Record the exact slow interaction. If a long task is dominated by JavaScript, inspect the call tree or bottom-up profile to find functions consuming CPU. If repeated layout calculations appear between script operations, look for code that alternates layout-dependent reads with DOM/style writes.

A common layout-thrashing pattern is element.style.width = ...; const x = element.offsetWidth; element.style.height = ...; const y = element.offsetHeight; repeated across many elements. Reads such as geometry queries can force the browser to bring layout state up to date after writes, turning a batchable rendering pipeline into repeated synchronous work.

Batch DOM reads together and DOM writes together when possible.
Move CPU-heavy pure computation away from the main thread if profiling proves it is the dominant problem.
Do not optimize based only on function call counts; rendering cost and allocation/GC behavior can dominate even when individual JavaScript functions look small.