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

Question

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

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

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

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

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

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

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

Answer 1

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

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

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

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