Как рассчитать время для интерактивной клиентской части?

Question

Инструмент Chrome Lighthouse и WebPageTest предлагают метрики "время-интерактив" (TTI).

Google предлагает минимальное определение TTI:

Time to Interactive определяется как точка, в которой макет стабилизировался, ключевые веб-шрифты видны, а основной поток доступен для обработки пользовательского ввода.

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

WebPageTest разбивает их на "время для первого интерактивного" и "время для постоянного интерактивного":

Время для последовательного интерактивного расчета

• Начните искать TTI с более крупной первой содержательной краски или DOM Content Loaded
• Найдите первое интерактивное окно, в котором непрерывный период в 5 секунд полностью содержится в интерактивном окне и не содержит более 2 запросов в полете.
• TTI - это начало интерактивного окна с шага 2 или начальная точка поиска, в зависимости от того, что наступит позже.

Первый интерактивный расчет

• Начните искать TTI с более крупной первой содержательной краски или DOM Content Loaded
• Найдите первое интерактивное окно, в котором непрерывный период в 5 секунд полностью содержится в интерактивном окне независимо от количества запросов в полете.
• TTI - это начало интерактивного окна с шага 2 или начальная точка поиска, в зависимости от того, что будет позже

Я хотел бы рассчитать две различные метрики TTI на стороне клиента WebPageTest и отправить их обратно в API (для целей RUM).

Возможен ли такой расчет с текущими API JavaScript? Если так, то как?

Обновить:

Я не нашел удовлетворительного решения на стороне клиента, но нашел более глубокое определение TTI.

Answer 1

GoogleChromeLabs предлагает полифилл для показателя TTI.

Браузеры в конечном итоге выставят метрику через встроенные API:

Примечание. Этот фрагмент является временным решением, пока браузеры не реализуют уровень 2 спецификации Performance Observer и не включат buffered флаг.