Пролог

Обратите внимание, я не эксперт в анализе производительности. Наоборот, я тот, кто хочет научиться и понять, как использовать вкладку производительности инструментов разработчика. Эта серия статей будет отслеживать мой монолог вопросов и ответов, чтобы преуспеть в этой теме. В каждой статье я буду продолжать задавать вопросы и искать ответы на эти вопросы, а также делиться своими выводами и полезными статьями. Пожалуйста, не стесняйтесь написать комментарий, ответить на вопрос или поделиться статьей, если хотите. Итак, эта статья может помочь вам узнать, как научиться чему-то с нуля, и я надеюсь, что комментарии и обсуждения ниже также помогут вам изучить саму тему.

1 день

Понимание производительности веб-страницы всегда было моей личной целью в течение длительного времени. Тема была очень интересной, но пугающей для меня. Быть мамой всегда казалось мне сложной задачей, пока я не родила своего любимого сына почти 6 месяцев назад. Несмотря на тяжелый труд, это оказалось самым радостным занятием в моей жизни. Это дало мне смелость погрузиться в эту тему. Итак, сегодня я отправляюсь в путешествие, чтобы каждый день узнавать и делиться небольшим количеством информации о производительности веб-сайта.

В настоящее время я работаю над проектом Angular, который я выбрал в качестве тематического проекта для исследования производительности. Вот моя первая попытка:

1) Откройте вкладку "Производительность" в инструментах разработчика
2) Нажмите "Запись"
3) Установите флажок на странице 4 раза
4) Остановите запись
5) Проверьте выходные данные профиля.

Эм. Есть несколько разделов, полных информации, но я не знаю, как ее интерпретировать. Каждый день я буду пытаться выяснить, как добавить значения к этим неизвестным.

У каждого раздела есть название, а эта статья стала хорошим началом и дала представление о том, как называется каждый раздел.

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

На приведенной выше диаграмме по оси X указано время в мс, а по оси Y — стек основного потока. Он начинается с клика по событию, а клик по событию инициирует «вызов функции в zone.js». «Вызов функции в zone.js» вызвал «globalZoneAwareCallback», и это идет вниз.

Я чувствую, что у меня есть базовое понимание с рядом вопросов, почему и что… Теперь я начну только с двух почему.

1) Почему цвет первого события оранжевый?
2) 1-е событие (щелчок по событию) представляет собой один целый блок, который кажется зонтиком для всего события щелчка. Событие щелчка разделено на две равные полосы в следующей строке и вызвало а) вызов функции (zone.js 1551) и б) событие (щелчок). Почему? Что это означает? Если это основной поток, что значит иметь два события рядом друг с другом?

Ну, видимо у меня более 2 вопросов почему :P

буду дальше копать…