[taha]

здесь в теме всё описано, все мои предположения, сомнения, и опровержения со стороны знающих людей

читайте сначала этой темы

про скоп замыкания и тд.

Советы по оптимизации

Большое количество таймеров сильно нагружают процессор.
Если вы хотите запустить несколько анимаций одновременно, например, показать много падающих снежинок, то управляйте ими с помощью одного таймера.

Дело в том, что каждый таймер вызывает перерисовку. Поэтому браузер работает гораздо эффективней, если для всех анимаций приходится делать одну перерисовку.

Фреймворки обычно используют один setInterval и запускают все кадры в заданном интервале.
Помогайте браузеру в отрисовке
Браузер управляет отрисовкой дерева и элементы зависят друг от друга.

Если анимируемый элемент лежит глубоко в DOM, то другие элементы зависят от его размеров и позиции. Даже если анимация не касается их, браузер все равно делает лишние расчёты.

Для того, чтобы анимация меньше расходовала ресурсы процессора(и была плавнее), не анимируйте элемент, находящийся глубоко в DOM.

Вместо этого:

Для начала, удалите анимируемый элемент из DOM и прикрепите его непосредственно к BODY. Вам, возможно придется использовать position: absolute и выставить координаты.
Анимируйте элемент.
Верните его обратно в DOM.

Эта хитрость поможет выполнять сложные анимации и при этом экономить ресурсы процессора.

Если JavaScript-анимация слишком медленно работает на смартфонах и планшетах, то, возможно, стоит заменить ее CSS-переходами.