PerformanceResourceTiming: свойство connectStart

Чтение только свойство connectStart возвращает timestamp непосредственно перед тем, как пользовательский агент начнёт устанавливать подключение к серверу для получения ресурса.

Свойство connectStart может принимать следующие значения:

• A DOMHighResTimeStamp непосредственно перед тем, как браузер начнёт устанавливать подключение к серверу для получения ресурса.
• 0 если ресурс был мгновенно получен из кэша.
• 0 если ресурс является междоменным запросом и заголовок ответа HTTP Timing-Allow-Origin не используется.

Свойства connectStart и connectEnd можно использовать для измерения того, сколько времени занимает установление рукопожатия TCP.

const tcp = entry.connectEnd - entry.connectStart;

Пример использования PerformanceObserver, который уведомляет о новых записях производительности resource, по мере их записи в хронологической записи производительности браузера. Используйте параметр buffered для доступа к записям, которые были созданы до создания наблюдателя.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const tcp = entry.connectEnd - entry.connectStart;
    if (tcp > 0) {
      console.log(`${entry.name}: TCP handshake duration: ${tcp}ms`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });

Пример использования Performance.getEntriesByType(), который отображает только записи производительности resource присутствующие в хронологической записи производительности браузера на момент вызова этого метода:

const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const tcp = entry.connectEnd - entry.connectStart;
  if (tcp > 0) {
    console.log(`${entry.name}: TCP handshake duration: ${tcp}ms`);
  }
});

Если значение свойства connectStart равно 0, ресурс может быть междоменным запросом. Чтобы получить информацию о междоменном тайминге, необходимо установить заголовок ответа HTTP Timing-Allow-Origin.

Например, чтобы позволить https://developer.mozilla.org видеть временные ресурсы, междоменный ресурс должен отправлять:

Timing-Allow-Origin: https://developer.mozilla.org

• Timing-Allow-Origin