Chrome Dev Tools - "Taille" vs "Contenu"

254

Lors de l'affichage des 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":

Capture d'écran des outils de développement avec la colonne Taille / Contenu mise en évidence

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

google-chrome web-inspector Mike
la source
1
Selon les documents , actuellement "par défaut, le tableau des demandes affiche les ressources avec de petites lignes; cliquez sur le bouton Utiliser les grandes lignes de demande pour augmenter la taille de chaque ligne". Cela afficherait également la colonne Contenu dans la taille.
Vadzim

Réponses:

324

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

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

De la documentation :

La taille est la taille combinée des en-têtes de réponse (généralement quelques centaines d'octets) plus le corps de la réponse, tel que fourni par le serveur. Le contenu est la taille du contenu décodé de la ressource. Si la ressource a été chargée depuis le cache du navigateur plutôt que via le réseau, ce champ contiendra le texte (depuis le cache).

Mark Brackett
la source
2
@NiCkNewman Oui La taille est la taille réelle des données (pas la bande passante btw) à travers le câble (en-têtes + contenu combinés). Le contenu est la taille du contenu gonflé et non compressé (par exemple s'il a été compressé au format gzip) uniquement (en-têtes exclus!).
Israël
3
Question stupide, mais utilisons-nous 1000 Ko par Mo ici, ou 1024?
Buttle Butkus
2
@ButtleButkus: Chrome, Firefox et IE / Edge utilisent tous le format JEDEC obsolète, où un kilo-octet est de 1024 octets et est écrit en Ko. Il serait préférable qu'ils le signalent au format ISO (base 10) ou l'écrivent en KiB / MiB.
okdewit
1
J'utilise Chrome version 60.0.3112.113 (version officielle) (64 bits) sur Mac et je suis juste tombé sur cette même question. Les captures d'écran de cette question sont le seul moyen par lequel j'ai pu déterminer la différence entre les chiffres gris et noirs. La version actuelle de Chrome que j'utilise ne semble pas afficher la sous-rubrique "Contenu". La colonne indique simplement "Taille". Y a-t-il quelque part dans les documents ou dans Chrome qui explique que le nombre gris est "Contenu". Je ne peux le trouver nul part.
flyingL123
1
Juste une note que dans les nouvelles versions de chrome, le nombre de gris ne s'affiche pas par défaut, vous devez cliquer sur le bouton "Utiliser les grandes lignes de demande" dans la barre "Affichage" en haut
Snekse
52

Sizeest la taille de la réponse elle-même et Contentla 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

c69
la source
4
Vous voulez probablement dire " Sizeest la taille de la réponse elle-même [...]" ("ressource" a également une signification différente en termes HTTP).
Bruno
1
Ce que @Bruno a dit. Cette réponse est tout simplement fausse et n'aurait pas dû être acceptée.
mhenry1384
Oui, c'est un discours fou: une DEMANDE de 32K !?
iconoclaste
1
zomg, vous aviez 1 an pour modifier ma réponse. Une simple faute de frappe, réponse évidente à une question banale, a été répondue dans les 23 minutes suivant la question, et acceptée parce qu'elle a aidé l'auteur à comprendre. Je ne sais pas pourquoi tant de gens vont sur Google et votent ... autant de bruit pour rien.
c69
7
Il est logique de modifier les réponses qui sont fondamentalement correctes, mais qui pourraient être améliorées. Votre réponse est un peu à la limite, puisque vous avez probablement voulu dire dire la réponse , mais en disant néanmoins la demande a été 32K est trompeur à tous ceux qui ne savaient pas assez pour savoir qu'il devait être complètement faux. (Ce sont les personnes qui posent des questions comme celle-ci et qui ont besoin de réponses correctes à leur sujet.) En outre, dire quelque chose de faux ne constitue pas une faute de frappe . C'est une erreur de fait, pas un gros doigté, même si vous aviez l'intention de dire autre chose.
iconoclaste
12

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

Ceci est ma formule basée sur la lecture de divers articles sur ce sujet (et je suis ouvert à l'améliorer davantage avec vos commentaires) Size = Compression (Content) + Response Header

Voir l'image utilisée dans cet article

Explication par Google

Vishwajit G
la source
5

"Utiliser de grandes lignes de demande" pour afficher les deux valeurs!

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

entrez la description de l'image ici

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

Outils Chrome Devs - où sont la taille et le contenu?

Se flétrir
la source