How to debug scroll event fired a lot later than the pointermove event?

With Chrome’s 20x slowdown + device emulation, you can see that the first scroll event occurs 230ms after the first mousemove event:

enter image description here

On Android (a flagship 2023 phone), without any artificial slowdown, there’s also noticeable lag when scrolling. I tried all the common fixes:

  • GPU acceleration with translateZ(0)
  • passive: true on scroll handlers
  • React time slicing
  • disabling packages one-by-one
  • avoid layout/paint

Since the web app is too complicated to make an MRE, this question isn’t about solving my specific problem. Instead, I’m looking for general ways to debug scroll lag issues. E.g.:

  • how to tell if a specific CSS property is expensive
  • how to figure out why “Hit Test” is taking so long
  • resources to understand why multiple pointermove events occur before the first scroll event

In addition to the common fixes I’ve listed, what are some other steps to debug this type of issue?