Как можно оптимизировать данный код?

Question

[Лев Александров]

Здравствуйте.
Помогите, пожалуйста, оптимизировать мой код: https://jsfiddle.net/Lu1p0xmo/
Там все подробно прокомментировал, чтобы быстрее вошли в курс дела.

Проблема в том, что когда зафиксированных точек становится много (больше 300), сайт начинает лагать. На фиддле возможно ничего не заметно, но у меня на сайте ощущается. Это самый тяжелый скрипт как мне кажется, остальные все стандартные: слайдеры, попапы, формы, так что не думаю, что проблема в них.
Понятия не имею, как можно еще написать. Могут ли объявления переменных и условия в цикле существенно влиять на производительность или все же дело в алгоритме?

Comments

[Сергей Соколов]

Вероятнее, тормозит эффект размытия (blur). Попробуйте отключить его — станет шустрее?
Ну и вряд ли нужен супер-длинный хвост — ограничьте, может, макс. число кругов: появление новых удаляет старые.
Или можно сделать какое-то прореживание старых – чем дальше от начала, тем вероятнее удаление очередного круга в пользу новых.

[Лев Александров]

Сергей Соколов, если еще сильнее ограничить длину, то будет еще заметнее, как быстро подтирается хвост, а заказчика бесит, когда что-то резко происходит. Еще думал сделать удаление при наложении, но это супер наворочено мне кажется, уже змейка целая будет. Убрал blur, сильно не помогло.

[Роман]

Сергей Соколов, Лев Александров, вот, посмотрите вариант. Не знаю насколько он вам будет приемлем, но количество точек уменьшено с 500 до 20 (это должно решить проблему с лагами), но это не сильно влияет на длину хвоста за счет изменений в строчках 104-106, затухание сделано очень плавным. Все места в которых вносил изменения помечены как /*!!!*/
https://jsfiddle.net/9L8dzurs/1/

[Лев Александров]

Роман, ну прикольно, можно и так попробовать, наверное. Я поигрался со значениями и подобрал оптимальные. Только вот не понимаю как работает ваше плавное стирание, когда точек больше одной вы рисуете прямоугольник на весь канвас с прозрачностью. Почему он стирает только хвост, а не фейдит весь след?

[Роман]

Лев Александров, потому что прозрачность очень большая, и чтобы что-то стереть таким способом, надо повторить его несколько сотен раз

[Роман]

Лев Александров, вот для примера собрал вам такую упрощенную демку.

На каждой итерации делается:
1. Поверх всех предыдущих отрисовок накладывается на всю область видимости белый полупрозрачный прямоугольник
2. накладывается ОДИН синий шарик со смещение относительно предыдущего (в вашем примере 20 шариков, чтобы сохранить эффект перелива цветов на участке около курсора мышки)

[Лев Александров]

Роман, ого, спасибо за такой подробный ответ, Роман.

[Лев Александров]

Роман, давайте отметим ваше решение? Отпишите снизу

[Роман]

Лев Александров, да бог с ним, с решением, мне лень переносить))))