Как отлаживать время между $ionicView.beforeEnter и $ionicView.enter

Ответ 1

Вероятно, не очень полезно, но когда у меня была аналогичная проблема, я не смог найти виновника с использованием профайлера отладки Chrome и должен был комментировать/исключать части кода в моем контроллере, к которому я перехожу один за другим. Проблема заключалась в том, что какой-то компонент календаря третьей стороны, сконфигурированный на этапе инициализации контроллера, замедлял переход (просмотр отображения). Когда-то прокомментировал, что все работает нормально. Поскольку это не был мой код, и я не хотел с ним связываться, мне пришлось добавить прогресс-переходник на переход.

Ответ 2

Возможно, вы можете использовать инструменты отладки, предоставляемые с Chrome, такие как Timeline или Profile: вы начинаете профилирование или запись временной шкалы и проверяете, что происходит между $ionicView.beforeEnter и $ionicView.enter. Обе функции имеют модуль поиска, поэтому вы можете искать $ionicView.beforeEnter и видеть, что занимает время до $ionicView.enter. Это, вероятно, не самый простой способ, но надеюсь, что это поможет вам.

Ответ 3

Пробовали ли вы отслеживать трафик на вкладке "Сеть" в консоли? Время в ms - хороший показатель того, что вызовы xhr работают дольше, чем ожидалось... запустите тест скорости.

В противном случае, если вы используете хром, я бы просто сбросил несколько операторов debugger во время потока этого состояния представления Ionic.

Ответ 4

Я не могу придумать простой способ сделать это. Но распространяясь на то, что упомянуто @nico_, используя хром-инструмент для отладки javascript, вы должны установить точку останова на $ioniView.beforeEnter и точку останова на $ionicView.enter, затем выполнить код между точками останова.

Вы можете узнать больше об инструментах отладки chrome javascript и о том, как настроить точки останова здесь: https://developer.chrome.com/devtools/docs/javascript-debugging

Ответ 5

Не существует кода "между точками останова"... Существует так много функций, вызываемых между двумя событиями...

- Tyrius

Вы должны попытаться определить функции, которые занимают слишком много времени для запуска.

Примечание.. Я полагаю, что ваше приложение не замедляется загрузками, вы можете проверить время загрузки в инструментах Chrome Dev (если TTFB слишком высок, вы можете иметь медленность на стороне сервера).

Если вы знаете, какие функции вызывают, у вас есть две возможности:

• Когда есть несколько функций и не вызывается слишком много раз:

  function ExampleFunction() {
      console.time("ExampleFunction");
      // ExampleFunction code
      // ...
      console.timeEnd("ExampleFunction");
      // output in console time between time() call and timeEnd() call
  }
  

• Если много функций вызывается много раз:

Я предлагаю вам использовать мой маленький инструмент JS под названием MonitorJS, чтобы помочь вам идентифицировать блоки кода, занимающие слишком много времени для запуска:

function ExampleFunction() {
    let mId = Monitor.Start("ExampleFunction");
    // ExampleFunction code
    // ...
    Monitor.Stop(mId);
}

и когда вы увидите, какая функция занимает слишком много времени, вызовите эту функцию:

function ShowMonitorRecords() {
    // get all records sorted by total_time desc
    let records = Monitor.GetAll().sort((a,b)=>{ return b.total_time - a.total_time; });
    // print every records
    for (let record of records) {
        let avg = record.total_time / record.call_count;
        console.log(record.name + ": " + record.total_time.toFixed(2) 
            + "ms - called " + record.call_count 
            + " time(s) - average time : "+ avg.toFixed(2) +"ms");
    }
}

// will output something like :
// Foo: 7234.33ms - called 2 time(s) - average time : 3617.16ms
// Bar: 6104.25ms - called 3 time(s) - average time : 2034.75ms

Как только вы узнаете, какая функция занимает слишком много времени, вы можете уменьшить область запуска/остановки, чтобы определить точный блок кода, замедляющий ваше приложение и рефакторинг.

Надеюсь, это поможет!