Question

我正在编写一个角度应用程序，使用angular-ui-router来管理状态/路由。

在桌面浏览器（Chrome / Safari）上运行正常。但是，在iPhone 4上的IOS 6上的Mobile Safari上（以及iPhone 5上的IOS 7上的较小范围），通过$ state.go更改状态可能需要2秒钟。

我正在使用ngTouch，所以我认为它不是本机点击事件触发的300毫秒。现在，没有调用$ state.go的ngClick属性似乎很快就会起作用。

我如何调试它以找到花费时间的地方？

Answer 1

ngTouch不适用于ui-sref指令。我们使用fastclick.js来处理点击行为，并删除了ngTouch。问题是指令踩到了彼此的事件，实际上是不兼容的。您可以通过阅读这两个指令的实现来看到这一点。

Answer 2

使用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-router在移动设备上的反应性，来自UI-router的附加功能的FutureState可能值得探讨：

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

...但唯一可以确定的方法是了解移动浏览器的内部结构及其DOM / JS / GPU在桌面浏览器方面的管理/计算限制。

可能是ng-animate需要在浏览器外观之前构建“下一个”模板，从而需要太多的移动浏览器。然而，这可能是完全无足轻重的事情。请告诉我们您的进展情况。

在Mobile Safari上调试慢速angular-ui-router状态更改

2 个答案: