PerformanceResourceTiming: свойство connectEnd

Это чтение-только свойство возвращает timestamp сразу после того, как браузер завершит установление соединения с сервером для получения ресурса. Значение отметки времени включает интервал времени для установления транспортного соединения, а также другие интервалы времени, такие как рукопожатие TLS и аутентификация SOCKS.

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

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

Свойства connectEnd и connectStart могут использоваться для измерения того, сколько времени требуется для установления рукопожатия 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`);
  }
});

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

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

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

• Timing-Allow-Origin