Оптимизация анимации - css или холст

Question

Я создаю личную веб-страницу, своего рода портфолио, и я получил представление об анимации, в которой многие логотипы технических вещей, таких как node.js, будут перемещаться снизу вверх, вот оно:

http://roman-k.herokuapp.com/

Печально, но он потребляет 70% графического процессора моего chrome на MacBook, и его нужно как-то оптимизировать, не могли бы вы поделиться мыслями о том, как это можно сделать?

В настоящее время он использует requestAnimationFrame и ctx.drawImage на холсте для каждого lo go.

Я думаю, мне следует разместить логотипы в некоторых случайных позициях с помощью JS, а затем анимировать их с помощью css , но как? Каждый lo go будет иметь случайные координаты x и y

Answer 1

Я нашел проблему! и решил это. Я удалил все рисунки и оставил только clearRect:

const animation = () => {
  ctx.clearRect(0, 0, width, height)
  animationFrame = window.requestAnimationFrame(animation)
}
animationFrame = window.requestAnimationFrame(animation)

Этот код просто очищает холст и не делает ничего полезного, однако он по-прежнему загружает процесс GPU более чем на 50%.

Чтобы решить эту проблему Я заменил requestAnimationFrame на setInterval, что сокращает рендеринг, 20 раз в секунду достаточно для моей анимации, и теперь GPU чувствует себя намного лучше.

PS Эта проблема могла быть chrome и ma c Speci c, потому что эта и другие css анимации работают намного плавнее и лучше на android телефоне, windows chrome и firefox на macbook