Как правильно понять временную шкалу devtools?

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

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

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

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

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

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

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

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

Спасибо

Ответы на вопрос(1)

Ваш ответ на вопрос