Debug slow angular-ui-router state change on Mobile Safari

问题

I'm writing an angular app, using angular-ui-router to manage states / routing.

On desktop browsers (Chrome / Safari) this is working fine. However, on Mobile Safari on IOS 6 on iPhone 4 (and to a lesser extend on IOS 7 on iPhone 5) changing state, via $state.go, can take anything up to 2 seconds.

I'm using ngTouch, so I don't think that it's the 300ms that the native click event takes to fire. ngClick attributes that don't call $state.go now seem to work pretty much instantaneously.

How can I debug this to find where the time is being spent?

回答1:

ngTouch doesn't work with the ui-sref directive. We used fastclick.js to handle the click behavior, and removed ngTouch. The issue is that the directives step on each others events, and are in fact incompatible. You can see this by reading the implementation of both directives.

回答2:

Use console.time to print out in the Mobile Safari Console, https://developer.chrome.com/devtools/docs/console-api#consoletimelabel

...in association with the ui-router listeners :

$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

Who knows, maybe for improving ui-router's reactivity on mobile devices, FutureState from UI-router's extras could be something worth to explore :

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

...but the only way to be sure is to understand the innards of the mobile browsers and their DOM/JS/GPU's management/computing limitations in respect of desktop browsers.

It could be that ng-animate requires too much of a mobile browser by building the "next" template ahead of its appearance into the viewport. And yet it could be something completely trivial. Please let us know your progress.

来源：https://stackoverflow.com/questions/19274876/debug-slow-angular-ui-router-state-change-on-mobile-safari

标签

ios

debugging

angularjs

mobile-safari

angular-ui-router