6

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

在桌面浏览器（Chrome / Safari）上，这工作正常。但是，在 iPhone 4 上的 IOS 6 上的 Mobile Safari 上（以及在 iPhone 5 上的 IOS 7 上的较小扩展）上，通过 $state.go 更改状态可能需要长达 2 秒的时间。

我正在使用 ngTouch，所以我不认为原生点击事件需要 300 毫秒才能触发。不调用 $state.go 的 ngClick 属性现在似乎可以立即工作。

我如何调试它以找到时间花在哪里？

4

2 回答 2

4

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

于 2013-12-17T00:13:27.917 回答
1

使用 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 需要太多的移动浏览器，方法是在其出现在视口之前构建“下一个”模板。然而，这可能是一件完全微不足道的事情。请让我们知道您的进展。

于 2014-12-04T23:03:27.873 回答