#jquery #performance #angularjs #mouseevent #hammer.js
#jquery #Производительность #angularjs #mouseevent #hammer.js
Вопрос:
У нас есть Angular.js приложение с маршрутизатором пользовательского интерфейса. В любом современном браузере наше приложение работает довольно быстро. Однако на одном из наших целевых устройств изменение вида происходит слишком медленно (в основном потому, что в данный момент оно ужасно выполняет JS — это побочная проблема, которую мы исправляем).
Основная проблема, которую мы видим, заключается в том, что у нас есть событие мыши, которое запускает изменение вида через $ location.изменение пути, и оно выполняется со скоростью 250-400 мс.
Мы перепробовали массу вещей, таких как отказ от событий Hammer, которые мы используем для вызова кода, демонтаж приложения, чтобы загружалось только пустое представление, удаление всех вызовов XHR, которые у нас были, удаление манипуляций с DOM и множество других небольших экспериментов.
Вызываемое событие jQuery — jQuery.event.add (в частности, строка 4305 jQuery 1.11.1).
Мы надеемся, что кто-нибудь сталкивался с подобной проблемой и может помочь диагностировать, что могло бы вызвать множество событий удаления таймера, событий GC, синтаксического анализа HTML, запроса кадров анимации, установки таймеров и пересчета стилей. Кажется, что каждое из них длится микросекунды или самое большее < 2 миллисекунд, а совокупный итог далеко не приближается к сотням миллисекунд, которые мы видим.
Комментарии:
1. Есть ли какой-либо способ изолировать часть кода в JSFiddle, чтобы было легче диагностировать, в чем проблема? Если большая часть проблемы связана с jQuery.event.add, я бы посмотрел в любом месте, где вы могли бы добавлять обработчик событий к наведению курсора мыши / mouseMove
Ответ №1:
Проблема оказалась в том, что упомянутое мной целевое устройство запускало JavaScript в 40 раз медленнее, чем Chrome на наших компьютерах разработчиков, и в 20 раз медленнее, чем на других наших устройствах. Мы только что запустили SunSpder, чтобы определить скорости.
Медлительность движков JS на самом деле только усугубила проблему. Нам все еще пришлось выполнить кучу оптимизаций, чтобы все исправить: — Удалить объекты, привязанные к ng-repeat — Установить bindonce с включенным обновлением (у нас уже было много bo-текста на месте, нам просто нужна была возможность обновления)
Теперь у приложения намного меньше задержек.
Estaban, извините, что не разместил код, и спасибо за ответ. Было слишком много работы, чтобы извлечь то, что нам нужно, чтобы представить четкую картину.