Как прочитать вкладку «Сеть» в Chrome DevTools - время загрузки - PullRequest
Новая
       83

Как прочитать вкладку «Сеть» в Chrome DevTools - время загрузки

1 голос
/ 05 ноября 2019

Мне было любопытно, так как я недавно работал с пользовательским интерфейсом и хотел узнать больше об этом.

enter image description here

Я читал справочное руководство по сети Chrome, но не уверен, правильно ли я его понимаю. Мне в основном интересно узнать о нижнем ряду или сводной панели.

Итак, из того, что я вижу, было 30 запросов общим объемом 34,7 КБ, но я не уверен в том, что последует дальше. Итак, я хочу узнать, каковы остальные статистические данные.

1) 758 КБ ресурсов - это общее количество загруженных и отправленных ресурсов?

2) Завершение: 448 мс - это время, которое потребовалось длявесь сайт завершить загрузку?

3) DOMContentLoaded: 235 мс - это время, которое требуется браузеру для анализа получаемой DOM?

4) Загрузка: 421 мс -это время, которое потребовалось моему браузеру, чтобы завершить загрузку всех необходимых ресурсов для страницы, таких как шрифты, картинки и т. д ...?

1 Ответ

2 голосов
/ 06 ноября 2019
  • transferred означает из сети, остальное (из общего объема 758 кБ) было из кеша
  • finish - это отметка времени последнего ресурса, поэтому она изменяется при каждом новом запросе
  • DOMContentLoaded - это отметка времени события DOMContentLoaded :

    , когда исходный HTML-документ был полностью загружен и проанализирован, без ожидания таблиц стилей, изображений иподкадры для завершения загрузки

  • Load - это отметка времени события load :

    , запущенного после завершения загрузки ресурса и его зависимых ресурсов.

...