Я создаю интерактивную карту, и на этой карте есть несколько автомобильных маршрутов, которые пользователь может создать, выбрав из меню. Каждый автомобильный маршрут представляет собой анимацию автомобиля, движущегося по маршруту.
Приложение работает нормально, однако есть пара сотен анимаций, которые пользователь может выбрать для создания, и идея состоит в том, что все выбранные анимации должны запускаться одновременно.
Каждая анимация определяется функцией, которая выглядит так...
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()? Я не уверен, каков подход для интерфейсных приложений.
