Ferramentas de desenvolvimento do Chrome - "Tamanho" x "Conteúdo"

254

Ao visualizar informações sobre folhas de estilo na guia Rede das ferramentas de desenvolvimento do Chrome, uma coluna especifica "tamanho" e "conteúdo":

Captura de tela das ferramentas de desenvolvimento com a coluna Tamanho / Conteúdo realçada

Alguém pode esclarecer a diferença entre esses dois números? Em algumas páginas, os números são próximos e outros, em quantidades consideráveis.

Mike
fonte
1
De acordo com a documentação , atualmente "por padrão, a tabela de solicitações exibe recursos com pequenas linhas; clique no botão Usar linhas grandes de solicitação para aumentar o tamanho de cada linha". Isso também mostraria conteúdo na coluna Tamanho.
Vadzim

Respostas:

324

"Tamanho" é o número de bytes na ligação e "conteúdo" é o tamanho real do recurso. Várias coisas podem torná-las diferentes, incluindo:

  • Sendo veiculado no cache (pequeno ou 0 "tamanho")
  • Cabeçalhos de resposta, incluindo cookies ("tamanho" maior que "conteúdo")
  • Redirecionamentos ou solicitações de autenticação
  • compressão gzip (tamanho "menor" que "conteúdo", geralmente)

Dos documentos :

Tamanho é o tamanho combinado dos cabeçalhos de resposta (geralmente algumas centenas de bytes) mais o corpo da resposta, conforme entregue pelo servidor. Conteúdo é o tamanho do conteúdo decodificado do recurso. Se o recurso foi carregado no cache do navegador e não na rede, esse campo conterá o texto (do cache).

Mark Brackett
fonte
2
@NiCkNewman Sim Tamanho é o tamanho real dos dados (não a largura de banda btw) no fio (cabeçalhos + conteúdo combinados). Conteúdo é o tamanho do conteúdo inflado e não compactado (por exemplo, se tiver sido compactado em gzip) (cabeçalhos excluídos!).
Israel
3
Pergunta idiota, mas estamos usando 1000 KB por MB aqui ou 1024?
Buttle Butkus
2
@ButtleButkus: Chrome, Firefox e IE / Edge usam o formato JEDEC desatualizado, em que um kilobyte tem 1024 bytes e é escrito como KB. Seria melhor se eles reportassem no formato ISO (base 10) ou escrevessem como KiB / MiB.
okdewit
1
Estou usando o Chrome versão 60.0.3112.113 (versão oficial) (64 bits) no Mac e me deparei com essa mesma pergunta. As capturas de tela nesta pergunta são a única maneira de determinar a diferença entre os números cinza e preto. A versão atual do Chrome que estou usando não parece exibir a subposição "Conteúdo". A coluna diz apenas "Tamanho". Existe algum documento nos documentos ou no Chrome que explique que o número cinza é "Conteúdo". Não consigo encontrar em lugar nenhum.
flyingL123
1
Apenas uma nota que, em novas versões do Chrome, o número cinza não mostra por padrão, você tem que clicar no botão "Usar grandes linhas pedido no "View" bar lá em cima
Snekse
52

Sizeé o tamanho da resposta em si e Contento tamanho do recurso que você está acessando.

Comparar:

cache vazio:

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

em cache:

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

c69
fonte
4
Você provavelmente quer dizer " Sizeé o tamanho da resposta em si" [...] "(" recurso "também tem um significado diferente em termos HTTP).
266 Bruno
1
O que @Bruno disse. Esta resposta está errada e não deveria ter sido aceita.
precisa saber é o seguinte
Sim, essa é uma conversa louca: um PEDIDO DE 32K !?
Iconoclast
1
zomg, você teve 1 ano para editar minha resposta. Apenas um erro de digitação simples, resposta óbvia para uma pergunta trivial, foi respondida dentro de 23 minutos depois que a pergunta foi feita e aceita porque ajudou o autor a entender. Não faço ideia por que tantas pessoas até pesquisam no Google e votam nele ... tanto barulho do nada.
C69
7
Faz sentido editar respostas basicamente corretas, mas que podem ser melhoradas. Sua resposta está no limite, já que você provavelmente quis dizer Resposta , mas mesmo assim dizer que a Solicitação tinha 32K é enganoso para quem não sabia o suficiente para saber que tinha que ser completamente falso. (Seriam as pessoas que fazem perguntas como essa e precisam de respostas corretas sobre elas.) Além disso, dizer algo falso não se qualifica como um erro de digitação . É um erro de fato, não um dedilhado gordo, mesmo que você pretenda dizer algo mais.
Iconoclast
12

Em termos simples, o artigo do Google explica como Tamanho = Tamanho da transferência e Conteúdo = Tamanho real insira a descrição da imagem aqui

Esta é minha fórmula baseada na leitura de vários artigos sobre este tópico (e estou aberto a aprimorá-lo ainda mais com seus comentários) Size = Compression (Content) + Response Header

Veja a imagem usada neste artigo

Explicação do Google

Vishwajit G
fonte
5

"Use grandes linhas de solicitação" para mostrar os dois valores!

Se você não vir o segundo valor (conteúdo), clique no botão "Usar linhas de solicitação grandes" na guia Rede do Chrome:

insira a descrição da imagem aqui

Encontrei isso graças à resposta sobre esta pergunta aqui:

Ferramentas Chrome Devs - onde estão o tamanho e o conteúdo?

Wilt
fonte