web-dev-qa-db-fra.com

Chrome Outils de développement - "Taille" vs "Contenu"

Lors de l'affichage d'informations sur les feuilles de style dans l'onglet Réseau des outils de développement de Chrome, une colonne spécifie à la fois la "taille" et le "contenu":

Screenshot of dev tools with Size/Content column highlighted

Quelqu'un peut-il nous éclairer sur la différence entre ces deux chiffres? Sur certaines pages, les chiffres sont proches et d’autres très différents.

254
Mike

"Taille" est le nombre d'octets sur le fil et "contenu" est la taille réelle de la ressource. Un certain nombre d'éléments peuvent les rendre différents, notamment:

  • Être servi depuis le cache (petit ou 0 "taille")
  • En-têtes de réponse, y compris les cookies ("taille" supérieure à "contenu")
  • Redirections ou demandes d'authentification
  • compression gzip ("taille" plus petite que "contenu", généralement)

de la documentation :

Taille correspond à la taille combinée des en-têtes de réponse (généralement quelques centaines d'octets) et du corps de la réponse, telle que fournie par le serveur. Le contenu est la taille du contenu décodé de la ressource. Si la ressource a été chargée à partir du cache du navigateur plutôt que sur le réseau, ce champ contiendra le texte (à partir du cache).

324
Mark Brackett

Size est la taille de la réponse elle-même et Content est la taille de la ressource à laquelle vous accédez.

Comparer:

cache vide:

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

mis en cache:

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

52
c69

En termes simples, l'article de Google l'explique comme suit: Taille = Taille du transfert et Contenu = Taille réelle enter image description here

Ceci est ma formule basée sur la lecture de divers articles sur ce sujet (et je suis ouvert à l’améliorer avec vos commentaires) Taille = Compression (contenu) + En-tête de réponse

Voir l'image utilisée dans cet article

explication de Google

12
Vishwajit G

"Utilisez de grandes lignes de requête" pour afficher les deux valeurs!

Si vous ne voyez pas la deuxième valeur (contenu), vous devez cliquer sur le bouton "Utiliser des lignes de requête volumineuses" dans l'onglet Chrome Réseau:

enter image description here

J'ai trouvé ceci grâce à la réponse à cette question ici:

Outils de développement Chrome - Où sont la taille et le contenu?

4
Wilt