Я рисую некоторые фигуры (arc, lineTo и т.д.) для использования requestAnimationFrame. Ничего особенного, но я замечаю какую-то случайную резкую анимацию. Я профилировал с помощью инспектора Timeline в инструментах Chrome dev, и вижу большое количество простоя на фрейм, некоторые из которых снижают FPS ниже 60 (см. Снимок экрана). Существует ли для этого известная причина или разрешение?
Рисование фигур на холсте, по-видимому, дорого стоит по цене и должно подпадать под "активность, которая не была обработана DevTools". Я решил проблему с производительностью, сначала создав фигуры в кеш-кадре, а затем drawImage, чтобы скопировать обратно на основной холст.
Сравните эти пики с графиком памяти. По моему опыту, большие холостые шипы, похоже, совпадают с сборкой мусора.