Я строю интерактивную карту, и на этой карте есть несколько автомобильных маршрутов, которые могут быть созданы пользователем при выборе из меню. Каждый автомобильный маршрут - это анимация автомобиля, движущегося по маршруту.
Приложение работает нормально, однако есть несколько сотен анимаций, которые пользователь может выбрать для создания, и идея заключается в том, что все выбранные анимации должны запускаться одновременно.
Каждая анимация определяется функцией, которая выглядит так ...
var animate = function(current) {
// If animation has not reached limit yet,
// call the next frame.
if (counter <= limit) {
requestAnimationFrame(animate);
}
// Do things every second.
if (current >= (last + 1000)) {
counter += 1;
// Do stuff.
}
}
Всякий раз, когда вызывается анимация, эта функция вызывается и добавляется в цикл обработки событий. На основании приведенного выше кода автомобиль должен двигаться каждую секунду. Однако это работает как задумано, если пользователь решит создать 100 анимаций, тогда 100 экземпляров этой функции будут работать в фоновом режиме и значительно замедлять код.
У меня вопрос: какие методы оптимизации внешнего интерфейса могут пригодиться, чтобы ускорить мою анимацию. Одна оптимизация, которую я сделал, состояла в том, чтобы переключиться с setInterval на requestAnimationFrame, но я не уверен, насколько это действительно улучшило что-либо.
Какие другие техники могут помочь? Существуют ли какие-либо методы параллелизма или потоков, которые могли бы помочь, если бы у меня было 100 запущенных экземпляров animate()? Я не уверен, что подход для интерфейсных приложений.