В Chrome Dev Tools Временная шкала: каковы серые полосы, окружающие загрузку ресурсов в строке сети?

Question

У меня есть следующий вид в Chrome Девых инструментов:

Что серые полосы означают окружающие фиолетовые запросы CSS? Я предполагаю, что часть до того, как запрос будет отправлен, но как насчет? Это время потрачено на разбор CSS или блокирование ожидания чего-то еще? Как я могу определить это более подробно?

Если это поможет, я включил «Main» часть шкалы времени:

и профиль процессора здесь:

С тех взглядов, которые я могу видеть «Синтаксическая HTML» и «Оценить/Скомпилировать сценарий». Означает ли это, что страница блокирует оценку этого скрипта или может включать разбор CSS? Я вижу «Parse Stylesheet» позже, поэтому я думаю, что серые полосы указывают на блокировку без активности на CSS после его загрузки.

Answer 1

Мне удалось сопоставить серые полосы с простоями, связанными с оценкой скрипта при загрузке моего HTML. Таким образом, по сути, это время, которое блокирует ожидание завершения оценки HTML. В частности, я включил LastPass и выполнял оценку моего HTML. Ниже я включил диаграмму:

После того, как я повернул расширение прочь, это время простоя пошел прочь.