Chrome Dev Tools - "Размер" и "Контент"

Question

При просмотре информации о таблицах стилей на вкладке "Сеть" инструментов разработчика Chrome в одном столбце указываются "размер" и "содержимое":

Кто-нибудь может пролить свет на разницу между этими двумя числами? На некоторых страницах цифры близки, а на других они значительно отличаются.

Answer 1

"Размер" - это количество байтов в проводе, а "контент" - это фактический размер ресурса. Ряд вещей может сделать их разными, в том числе:

• Обслуживание из кеша (маленький или 0 "размер")
• Заголовки ответов, включая файлы cookie (размер "больше", чем "контент")
• Перенаправления или запросы аутентификации
• сжатие gzip (обычно меньше размера, чем content)

Из документов:

Размер - это объединенный размер заголовков ответа (обычно несколько сотен байтов) плюс тело ответа, доставляемое сервером. Контент - это размер декодированного контента ресурса. Если ресурс был загружен из кеша браузера, а не по сети, это поле будет содержать текст (из кеша).

Answer 2

Size это размер самого ответа, и Content размер ресурса, к которому вы обращаетесь.

Для сравнения:

пустой кеш:

main.js GET 200 OK .. Size: 31.72KB Content: 31.42KB

кэшировать:

main.js GET 304 Not modified .. Size: 146B Content: 31.42KB

Answer 3

Проще говоря, статья Google объясняет это как Размер = Размер передачи и Содержание = Фактический размер.

Это моя формула, основанная на прочтении различных статей по этой теме (и я открыт для дальнейшего улучшения с вашими комментариями) Размер = Сжатие (Содержимое) + Заголовок ответа

Смотрите изображение, используемое в этой статье

Объяснение от Google

Answer 4

"Используйте большие строки запроса", чтобы показать оба значения!

Если вы не видите второе значение (контент), вам нужно нажать кнопку "Использовать большие строки запроса" на вкладке Chrome Network:

Я нашел это благодаря ответу на этот вопрос здесь:

Инструменты Chrome Devs - где размер и содержание?

Answer 5

включает ответ И информацию о запросе

представляет собой сумму:

1. байт передано для заголовка запроса
2. байтов, переданных для заголовка ответа
3. байтов, переданных для тела ответа

Из документов :

Проверка свойств отдельного ресурса, таких как его HTTP-заголовки [обратите внимание на множественное число, выделено мной], содержимое, размер и так далее.

Если сравнить transferSizeиз performanceEntry (например , для основного документа на https://stackoverflow.com/ ) с Sizeна вкладке «Сеть» Chrome DevTools вы увидите, что они не совпадают. Это потому, что performanceEntry не содержит размер заголовка запроса.

Снимок экрана вкладки «Сеть» и запись о производительности в журнале.