Hi all!
I'm not exactly sure if this is the right place for this, but I suspect this might be a bug in chrome, but maybe not - I don't know where else to ask.
I am a fairly advanced web developer and have created a complex app where there is a functionality that essentially calculates bounding rects of texts and uses canvas to draw highlights (an e-book reader).
As I was developing this, I always used 6x slowdown simulation to make sure it would never feel slow on a low-end device. It was always super fast anyway.
A few days ago I woke up (actually, last Saturday), and suddenly everything was extremely slow, even with no throttling. Dragging a highlight would take about two seconds per frame rather than 60 frames per second as it was the previous day.
So I thought I made an accidental mistake in my code, rolled back to a previous version in git to try and track the change that made this happen, and the same thing was happening. I rolled back to a week or two prior and it was still happening.
I opened my performance monitor and it didn't look like any kind of calculations were doing this, and I saw this: (see attached)
I'm trying to wrap my head around what exactly could be going on the commit phase, which shows no more information for me other than that it's a commit phase. Note that this does not happen in Safari, which is very snappy, which leads me to think it's something specific to Chrome's rendering pipeline.
I tried to isolate in my code exactly to find exactly what was happening. It doesn't actually seem to have anything to do with drawing in the canvas. When disable all calls to drawing APIS in the canvas, it still happens (e.g., I drag without any color being 'painted', but the commit phase is still 2 seconds per frame). Just the fact that the canvas is there seems to make it happen.
I want to understand what's going on in this mysterious "commit" phase. As I understand it, this phase is responsible for compositing different layers together ? Perhaps for some reason the canvas is involved in such a way that it's clogging something. This delay does seem to scale linearly with the size of the canvas.
The canvas itself is pretty big as it covers a whole scrollable page section at 2x resolution, but still, it's snappy in Safari and it was snappy in 6x slowdown the previous day (or I'm losing my mind). The slowdown seems linear to the size of the canvas.
What baffles me is that this only started happening on Saturday. Maybe there was an update to chrome that made this happen? Before it was extremely fast.
Any kind of insight in any way is helpful. I'm totally in the dark here. There's nothing for me to go on with the performance profiler.
Thanks!