Как правильно понять график devtools?

Question

Мой вопрос касается Chrome DevTools, в частности у меня есть вопрос о вкладке Timeline. Так как я читал много раз, мой браузер должен иметь скорость передачи в 60 кадров в секунду. Иногда, хотя у этого есть тяжелое выполнение JS и предотвращение 60fps, случается. Также, если у меня есть CSS и JS, которые вызывают перерасчет и перерисовку дерева DOM (части или полного дерева), для одного кадра может потребоваться больше ~ 16 мс. Вот картина такого длинного кадра из нашего приложения:

Хорошо, здесь я могу ясно видеть, что две просьбы взять столько времени (192ms + 14ms), что браузер не может рисовать 60fps и он не становится даже близко.

Хотя вот другая картина:

Так что гораздо лучше. Теперь это ~ 42 кадра в секунду. Но теперь я не понимаю, почему ..

У меня есть пара «обновить слой дерева» и «покрасить» случаи. Некоторые события мыши, но все они < = 1ms здесь.

Во время этого кадра есть 12 таких «событий». 10 из них еще меньше 0.30ms, поэтому, если я их суммирую, то это будет меньше 16 мс (3.57, если я правильно подсчитаю), но Chrome говорит, что этот кадр составляет 23,9 мс.

Почему Timeline говорит, что у меня есть хлам? Что мне делать, чтобы избавиться от него и как узнать, где это узкое место?

Я немного смущен здесь, потому что я определенно пропустил что-то в рассмотрении временной шкалы. Поэтому, пожалуйста, дайте мне подробное объяснение или некоторые подробные учебники о том, как избавиться от таких «джонков» и как их обнаружить , Хотя я уже прочитал пару статей и почти закончил Udemy курса по производительности, я до сих пор путаю ..

Спасибо

Answer 1

Я подозреваю, что есть «родной» код, выполняемый в этом открытом пространстве, что временная шкала не сообщается.

Возможно, вы захотите попробовать использовать вкладку «Профили» в инструментах dev, чтобы вместо этого получить профиль процессора. Это покажет панель для «(Программы)», которая является встроенным кодом Chrome, который выполняется. Это может быть, по крайней мере, начать выяснять, что происходит.

Временная шкала показывает белый зазор с правой стороны:

Profiler показывает, что (Программа) и вывоз мусора "(г ... г)" там происходят

Если там есть большой блок «(Программы)», тогда я думаю, вы можете использовать вкладку «хрома: // трассировка», в которой будет отображаться весь собственный/внутренний материал: