Как читать информацию о времени выполнения сценариев на вкладке "Профилирование / производительность Chrome"

Question

Мне сказали, что мой скрипт блокирует основной поток на сайте моего клиента.

Это помечено как <script async...> поэтому он не должен быть сетевым блоком.

Я запустил профилировщик Chrome, и я не очень понимаю, на что смотрю, несмотря на поиск объяснений.

Вот скриншот рассматриваемого скрипта:

Я не понимаю, какая часть всего синего блока является "частью, блокирующей нить"

Вот связанный Bottom-Up Таблица:

На первом изображении "тонкая линия" проходит от 500 мс до 900 мс, что составляет около 400 мс, но в таблице "снизу вверх" указано, что общее время "сценария оценки" составляет 184,5 мс.

Итак, могу ли я предположить, что время "блокировки" сценария должно быть взято из таблицы "снизу вверх", которая составит 184,5 мс?

Answer 1

1. На первом скриншоте мы смотрим на раздел Сеть. Вы можете прочитать, как сделать смысл его здесь.
   Коротко:

   • Левая строка - это все до Connection Startгруппа мероприятий включительно. Другими словами, это все, что было раньшеRequest Sent, эксклюзив.
   • Светлая часть планки Request Sent а также Waiting (TTFB).
   • Темная часть полосы Content Download.
   • Правая строка - это время, потраченное на ожидание основного потока.

   Так что дело не во времени исполнения.

2. Сам я пока не совсем понимаю, что за Bottom-Upвкладка раздела Сеть означает... Может, у него даже нет прямого подключения к сетевому запросу:

   В Bottom-Upвкладка отображает только действия во время выбранной части записи

   во время не обязательно означает вызвано.

3. Но в любом случае это, вероятно, не то, что вы ищете. Взгляните на раздел Main, сразу после окончания сетевого запроса, когда, наконец, ожидание завершения основного потока, свободного и готового к выполнению скрипта, вы, вероятно, увидите длинную полосу - это время, когда ваш скрипт блокирование основного потока.
   Например, посмотрите на скриншот

   • Первый lux.js загружается (в данном случае из кеша).
   • Затем он ожидает основного потока (от 3117 мс до 3128 мс).
   • Затем Task начинается (он выделен и указывается маленькой стрелкой, большая стрелка указывает на то, что lux.js действительно начинает свое исполнение)
   • Некоторое время уходит на Compile Script
   • И только после этого вы можете увидеть флейм-график выполнения скрипта (в красном кружке)

   Вы можете прочитать об этом на той же странице здесь.

---

Также здесь и в последующих статьях можно найти дополнительную информацию и идеи по оптимизации использования монитора производительности.