init commit

[bosear]

После просмотра работы изначального скрипта стало понятно, что основная причина "тормозов" заключается в выбранном способе анимации, а именно реализация частицы путём вставки DOM-элемента с последующим его перемещением приводила периодическому rendering-у. Для одной частицы это не критично, но уже при 500 частиц и более это способствовало приличным зависаниям.

На данном скриншоте заметны периодические "просадки" FPS (до 17 кадров/с), которые соответствуют примерному времени отработки таймера-интервала (некоторые подчёркнуты красным). При этом видно, что сильно задействован процесс rendering-а (занимает большую часть времени во время "тормозов").
Как итог, было полностью переписано с использованием canvas. Rendering сильно улучшился, возросло при этом "влияние" работы JS, однако FPS больше и гораздо стабильней (на скриншоте пример просадки до 37 кадров/с).

Научным исследованием это и близко назвать нельзя, однако хоть какие-то показатели на скорую руку. В целом стало работать лучше, однако немного изменилась плавность анимации. Не могу не отметить, что с canvas-ом также происходят провисания (например, при 5000 объектах), однако "потолок" всё же выше. Теоретически можно покапаться ещё в анимации, оптимизировать и улучшить её/код (за неимения опыта работы с подобной анимацией и времени...). Ну и, конечно, попробовать переписать с использованием WebGL. На SVG надежд не возлагаю.