Как интерпретировать пробелы в хромированных диаграммах пламени

Я пытаюсь лучше понять, как интерпретировать диаграммы пламени Chrome.
На приведенной ниже диаграмме _changeHandler показан как четыре отдельных блока. Однако я точно знаю, что он вызывается только один раз.

Я видел здесь аналогичный вопрос, в котором утверждается, что это может быть ошибка, но это было четыре года назад:
Что означает этот пробел в пламенной диаграмме профиля Chrome devtools

введите здесь описание изображения

Вопрос
В каком случае инструменты Chrome Perf будут отображать пробелы в диаграмме пламени для одного и того же вызова функции?

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

При использовании троттлинга процессора проблема становится экспоненциально хуже. Посмотрите на второе изображение, это та же операция, что и на первом графике, но с замедлением процессора, установленным на 5-кратное замедление.
Фрагментированная полоса под «Вызовом функции» — это один вызов функции, по какой-то причине он фрагментирован на сотни секций. .

введите здесь описание изображения


person Willem D'Haeseleer    schedule 01.09.2017    source источник
comment
Какова ваша методология, чтобы узнать, что это вызывается только один раз?   -  person Kayce Basques    schedule 02.09.2017
comment
@KayceBasques Выписка из журнала.   -  person Willem D'Haeseleer    schedule 02.09.2017
comment
Видимо это отражает внутреннюю реализацию троттлинга. Всё равно похоже на баг.   -  person wOxxOm    schedule 02.09.2017


Ответы (1)


Дело в том, что мы получаем данные функции JS сэмплированием (в отличие от нативных событий, которые мы получаем с помощью инструментов запуска/остановки). Так что внутренне это всего 4 образца, которые попали в указанную функцию. Мы не знаем, было ли это выполнено один раз, или 4 раза, или 100 раз, но мы делаем все возможное, чтобы склеить их так, чтобы это выглядело как один вызов, пока образцы находятся рядом.

Но иногда эта логика таинственным образом дает сбой. В большинстве случаев это происходит из-за некоторых проблем при выборке стека JS (если какая-то встроенная или нативная функция находится сверху, мы иногда не можем правильно раскрутить стек).

Источник: Чат с инженером DevTools.

Если вы хотите приватно отправить URL или шаги для воспроизведения, Команда может проверить это. Они думали, что исправили эту категорию ошибок.

person Kayce Basques    schedule 01.09.2017
comment
Спасибо, что объяснили! Я хотел бы предоставить дополнительные отзывы, но, похоже, мне не разрешен доступ к этому документу Google. Я живу в Маунтин-Вью, может быть, я смогу зайти :D? - person Willem D'Haeseleer; 02.09.2017
comment
Я добавил дополнительный скриншот, чтобы действительно продемонстрировать, как это становится проблематичным для всего графика. - person Willem D'Haeseleer; 02.09.2017
comment
Это сводило меня с ума! Посмотрите на этот график: диаграмма пламени, без газа. Пытаясь отладить это, я подумал, что RequireJS загружает AppHeader много раз. Ну, по крайней мере, теперь я знаю, что на самом деле есть только один звонок. - person danguilherme; 14.09.2017