PerformanceResourceTiming: свойство transferSize

Это transferSize только для чтения, которое представляет размер (в октетах) полученного ресурса. Размер включает поля заголовка ответа и тело полезной нагрузки ответа (как определено в RFC7230).

Если ресурс получен из локального кэша или это ресурс с другим происхождением, это свойство возвращает ноль.

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

• Число, представляющее размер (в октетах) полученного ресурса. Размер включает поля заголовка ответа и тело полезной нагрузки ответа (RFC7230).
• 0 если ресурс был мгновенно получен из кэша.
• 0 если ресурс — это запрос с другим происхождением и не использовался заголовок ответа HTTP Timing-Allow-Origin.

Для сред, не поддерживающих свойство responseStatus, свойство transferSize можно использовать для определения попадания в кэш. Если transferSize равно нулю, а размер декодированного тела ресурса ненулевой (что означает, что ресурс имеет то же происхождение или содержит заголовок Timing-Allow-Origin), ресурс был получен из локального кэша.

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

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.transferSize === 0 && entry.decodedBodySize > 0) {
      console.log(`${entry.name} was loaded from cache`);
    }
  });
});

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

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

const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  if (entry.transferSize === 0 && entry.decodedBodySize > 0) {
    console.log(`${entry.name} was loaded from cache`);
  }
});

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

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

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

• Timing-Allow-Origin