Debugging slower than angular Changing -ui-router state on Mobile Safari

Question

I am writing an angular application using angular -ui-router for state / routing management.

On desktop browsers (Chrome / Safari) this works fine. However, in Mobile Safari on iOS 6 on iPhone 4 (and to a lesser extent on iOS 7 on iPhone 5), changing the state through $ state.go can take up to 2 seconds.

I am using ngTouch, so I don’t think it is 300 ms, which happens with my own click event. ng Write attributes that don't call $ state.go now seem to work very fast.

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

Answer 1

ngTouch does not work with the ui-sref directive. We used fastclick.js to handle click behavior and remove ngTouch. The problem is that directives attack each other's events and are actually incompatible. You can see this by reading the implementation of both directives.

Answer 2

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

... in connection with 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, to improve responsiveness on mobile devices, future versions of UI-router may be interesting for the future:

http://christopherthielen.imtqy.com/ui-router-extras/#/future

... but the only way to be sure is to understand the insides of mobile browsers and their limitations on managing / computing the DOM / JS / GPU for desktop browsers.

Perhaps ng-animate requires too many mobile browsers, creating the “next” template before it appears in the viewport. And yet it may be something completely trivial. Let us know your progress.