Отладка медленного изменения состояния angular-ui-router в Mobile Safari

Я пишу угловое приложение, используя angular-ui-router для управления состояниями/маршрутизацией.

В настольных браузерах (Chrome/Safari) это работает нормально. Однако в Mobile Safari на IOS 6 на iPhone 4 (и в меньшей степени на IOS 7 на iPhone 5) изменение состояния через $state.go может занять до 2 секунд.

Я использую ngTouch, поэтому я не думаю, что это 300 мс, которые требуются для запуска собственного события click. Атрибуты ngClick, которые не вызывают $state.go, теперь работают почти мгновенно.

Как я могу отладить это, чтобы найти, где тратится время?


ios debugging angularjs mobile-safari angular-ui-router
person Michal Charemza    schedule 09.10.2013    source источник
comment
Вы нашли решение? Я испытываю ту же проблему.   -  person Leeroy Brun    schedule 19.02.2014

Ответы (2)


arrow_upward
4
arrow_downward

ngTouch не работает с директивой ui-sref. Мы использовали fastclick.js для обработки кликов и удалили ngTouch. Проблема в том, что директивы наступают друг на друга и фактически несовместимы. Вы можете убедиться в этом, прочитав реализацию обеих директив.

person Preston Marshall    schedule 17.12.2013
comment
Я проголосовал за это, так как не думаю, что это отвечает на мой вопрос об отладке. - person Michal Charemza; 17.12.2013
comment
Как я уже сказал, он не работает с ним, поэтому функциональность ngTouch фактически не работает. Если вам нужны подробности, прочитайте источник двух, как это сделал я. Вы обнаружите, что ui-sref поглощает события кликов, используя свои собственные методы, поэтому на самом деле он никогда не попадает в материал ngTouch. В итоге мы использовали fastclick.js вместо ngTouch, он отлично работает. Я думаю, что на самом деле мой ответ БОЛЬШЕ полезен для вас, чем если бы я рассказал вам о том, как читать источник двух директив (что я и сделал), чтобы увидеть, что они наступают друг на друга. - person Preston Marshall; 15.01.2014
comment
Я не использую директиву ui-sref, поэтому не думаю, что на это тратится время. Все наши изменения маршрута являются программными через $state.go, первоначально инициированные стандартными атрибутами ng-click. Кроме того, мой вопрос о том, как отладить ситуацию... Может быть, мне точнее следовало спросить, как профилировать определенные части приложения на iPhone. - person Michal Charemza; 15.01.2014
comment
Вы можете попробовать использовать расширение Angular Batarang для профилирования того, где тратится время. - person Preston Marshall; 16.01.2014
comment
Как он может использовать Batarang в мобильном Safari? Это плагин для Chrome. - person blaster; 27.08.2014
comment
Хотя это и не идеальное решение, вы все же можете использовать Chrome для поиска проблем с производительностью, которые влияют на просмотрщики мобильных и настольных компьютеров. - person Preston Marshall; 06.09.2014

arrow_upward
1
arrow_downward

Используйте console.time для печати в консоли Mobile Safari, https://developer.chrome.com/devtools/docs/console-api#consoletimelabel

... в связи с слушателями ui-router:

  • $stateChangeStart
  • $stateChangeSuccess
  • $viewContentLoading

  • $viewContentLoaded

        /* EXAMPLE - INCREMENT THE TIMER 
       FOR EACH ONE OF THE LISTENERS, TO DETECT THE BOOTLENECK */

    // START TIMING NOW
    console.time('state_transition');
    /*
    http://devin-clark.com/what-you-might-not-know-about-chrome-devtools/
    */

        $rootScope.$on('$stateChangeSuccess',
             function(event, toState, toParams, fromState, fromParams){ 
             console.timeStamp('state_transition');
    });

    // STOP TIMER
    console.timeEnd('state_transition');

http://www.ng-newsletter.com/posts/angular-ui-router.html


Кто знает, возможно, для улучшения реакции UI-маршрутизатора на мобильных устройствах стоит изучить FutureState из дополнений UI-маршрутизатора:

http://christopherthielen.github.io/ui-router-extras/#/future


... но единственный способ убедиться в этом — понять внутренности мобильных браузеров и ограничения их управления/вычислений DOM/JS/GPU по сравнению с настольными браузерами.

Возможно, ng-animate слишком много требует от мобильного браузера, создавая «следующий» шаблон до его появления в области просмотра. И все же это может быть что-то совершенно тривиальное. Пожалуйста, сообщите нам о своем прогрессе.

person Christian Bonato    schedule 04.12.2014