Расчет и проверка времени до первого байта (TTFB)

Мне дали следующие формулы для измерения времени до первого байта (TTFB), TTFB до готовности DOM и загрузки страницы.

ТТФБ

window.performance.timing.responseStart - window.performance.timing.navigationStart

От TTFB к DOM готов

window.performance.timing.domComplete - window.performance.timing.navigationStart

Загрузка страницы

window.performance.timing.loadEventStart - window.performance.timing.navigationStart

Верны ли эти формулы? И как мне их проверить? Я слышал, что вы можете измерить их на панели Network Firebug, но в целом получение значений кажется громоздким. Не уверен, где вы получаете значения в Chrome.

Итак, как определить эти измерения?


performance google-chrome-devtools firefox-developer-tools pagespeed firebug
person pmb88    schedule 09.02.2016    source источник
comment
Откуда вы взяли эти формулы?   -  person Sebastian Zartner    schedule 12.02.2016

Ответы (2)


arrow_upward
9
arrow_downward

На самом деле Firebug позволяет очень легко увидеть эти тайминги. Вам просто нужно выполнить window.performance.timing в его командной строке, и он отобразит график и перечислит все тайминги ниже, например:

«‹code›window.performance.timing‹/code›

Кроме того, согласно описанию на MDN, я бы сказал ваш расчет должен начинаться с fetchStart, так как это момент времени, когда браузер готов получить документ с помощью HTTP-запроса. В зависимости от вашего определения DOM Ready временем окончания этого измерения также может быть время domInteractive или domContentLoadedEventStart.

Итак, я бы сказал, что правильные измерения будут такими:

ТТФБ

window.performance.timing.responseStart - window.performance.timing.fetchStart

От TTFB к DOM готов

window.performance.timing.domInteractive - window.performance.timing.fetchStart

Загрузка страницы

window.performance.timing.loadEventStart - window.performance.timing.fetchStart
person Sebastian Zartner    schedule 10.02.2016
comment
Эта временная диаграмма Firebug не выглядит точной - я сомневаюсь, что браузер дождался получения всего html, чтобы начать его анализ DOM. - person NoBugs; 12.02.2016
comment
Вы правы, график неверен в отношении обработки DOM. В настоящее время (Firebug 2.0.14) относится ко времени с responseEnd по loadEventStart, тогда как на самом деле это должно быть время между domLoading и domInteractive или domComplete. Я зарегистрировал для этого issue 7993. Тем не менее вы можете прочитать правильные тайминги из таблицы. - person Sebastian Zartner; 12.02.2016

arrow_upward
3
arrow_downward

Это можно подтвердить с помощью вкладки сети Chrome:

Пример TTFB:

window.performance.timing.responseStart - window.performance.timing.requestStart

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

person gouravtiwari21    schedule 31.08.2016