PerformanceLongAnimationFrameTiming: свойство blockingDuration

Чтение только свойство blockingDuration интерфейса PerformanceLongAnimationFrameTiming возвращает DOMHighResTimeStamp, указывающее общее время в миллисекундах, в течение которого основной поток был заблокирован от реагирования на задачи высокого приоритета, такие как пользовательский ввод.

blockingDuration рассчитывается путем взятия всех долго выполняющихся задач в LoAF, которые имеют duration более 50ms, вычитания 50ms из каждой, добавления времени рендеринга к времени выполнения самой длительной задачи и суммирования результатов. Давайте рассмотрим пример, чтобы прояснить, что это значит.

Представьте себе файл JavaScript, обработка которого занимает в общей сложности 145 мс. После обработки первой основной части скрипта за 65 мс мы могли бы разделить выполнение оставшейся части скрипта на две задачи, при этом вторая задача потребовала бы 80 мс для выполнения. Такое разделение обработки предпочтительнее, чем полное выполнение скрипта как одной задачи, поскольку оно дает браузеру возможность обрабатывать пользовательские взаимодействия между задачами. Этот подход известен как уступка. В качестве примера, вы можете уступить, вставив setTimeout() после выполнения первой основной части скрипта.

Здесь необходимо рассмотреть три варианта обработки скрипта:

1. Если мы уступим после первых 65 мс, браузер может решить отобразить кадр перед выполнением остальной части скрипта.
2. В качестве альтернативы браузер может сначала выполнить остальную часть скрипта, а затем отобразить кадр.
3. Мы также можем не уступать и позволить браузеру обработать весь скрипт как одну задачу.

Ранее мы упоминали, что общее время обработки скрипта составляет 145 мс. Предполагая, что время для обновления отображения UI составляет 10 мс, временные параметры LoAF в каждом из трех вариантов следующие:

* В вариантах 2 и 3 существует только один LoAF.

Обратите внимание, что общее blockingDuration в первых двух вариантах одинаково (55 мс) — в каждом случае браузер решил разделить работу по-разному.

Однако в варианте 3 blockingDuration значительно больше, поскольку браузер полностью заблокирован и не может прервать выполнение долгой задачи. Это подчеркивает важность оптимизации длинных задач путем уступки — независимо от того, как браузер решает обработать задачи, время блокировки по-прежнему будет меньше, чем если бы вы вообще не уступали.

Разница между duration и blockingDuration LoAF можно резюмировать следующим образом:

• duration — это показатель общего времени отклика LoAF, что полезно для понимания того, заняло ли много времени форматирование, рисование и т. д. кадра.
• blockingDuration — это показатель общего времени, в течение которого LoAF блокировал основной поток от реагирования на задачи высокого приоритета, такие как пользовательские взаимодействия, что может сделать интерфейс неудобным. Другими словами, это показатель влияния LoAF на отзывчивость.

Причина, по которой blockingDuration каждой задачи вычисляется как duration - 50ms, заключается в том, что задержки отклика свыше 50 мс начинают заметно ощущаться пользователями. Этот порог — это момент, когда пользователи начинают замечать медлительность; поэтому время, превышающее отметку в 50 мс, важно измерить для определения степени некорректности работы.

A DOMHighResTimeStamp.

См. Примеры, связанные с API Long Animation Frames.

• Время выполнения длинных анимационных кадров
• PerformanceScriptTiming
• Оптимизация длинных задач на web.dev (2024)