Как использовать Waterfall в Chrome Dev Tool для диагностики проблем с производительностью веб-рендеринга?

Question

Одна из наших веб-страниц имеет проблему с производительностью рендеринга: когда страница открыта, вращатель останавливается или загружается очень медленно, и через 6-12 секунд страница завершает загрузку. Поэтому я использую сетевой водопад в Chrome Dev Tool для диагностики проблемы. Но у меня есть несколько сценариев, которые я не понимаю, что случилось.

На следующих снимках экрана все ресурсы для соответствующей страницы загружаются за очень короткое время, но счетчик останавливается на 6 секунд или 9 секунд, я не уверен, что происходит после загрузки ресурсов и до завершения страницы загрузка, может, прядильщик не в той теме или как-то заблокирован? Какие средства я должен использовать, чтобы выяснить причину?

Сценарий 1

Сценарий 2

ОБНОВИТЬ

Скриншот сети

Скриншот временной шкалы

ОБНОВИТЬ

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

Answer 1

Спасибо за подробную информацию. Было бы более полезно, если бы вы могли ссылаться на страницу, но я понимаю, что это часто невозможно. Я просто предоставлю некоторые общие данные для людей в одной лодке. Я не знаю, смогу ли я полностью ответить на этот конкретный вопрос, хотя.

На снимках экрана " Сценарий 1" и " Сценарий 2" видно, что ваши ресурсы загружаются за 1 или 2 секунды. Это ваш сигнал, что проблема не связана с сетью.

Так что, хотя это проблема загрузки страницы, она не имеет ничего общего с сетью.

Снимок экрана Timeline показывает, что загрузка вашего ЦП полностью увеличена с 1900 мс до 16000 мс. Таким образом, ваша страница заставляет браузер выполнять огромную работу. Это, вероятно, в JavaScript.

Чтобы диагностировать это, я бы исследовал диаграмму пламени (в разделе " Главная"), которую вы можете увидеть на скриншоте временной шкалы. Чем длиннее планка, тем дольше выполняется эта функция. Или, если вы видите, что маленькая функция вызывается тысячи раз, это может быть причиной. Если вы можете оптимизировать эти вызовы, то вы сможете быстрее загрузить свою страницу. Вы можете щелкнуть заголовок Self Time на скриншоте UPDATE, чтобы ранжировать вызовы функций, в соответствии с которыми заняло больше всего времени.

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