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 を使用してモバイル 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 に答える