Alat Dev Chrome - "Ukuran" vs "Konten"

254

Saat melihat informasi tentang stylesheet di tab Jaringan alat pengembang Chrome, satu kolom menentukan "ukuran" dan "konten":

Cuplikan layar alat dev dengan kolom Ukuran / Konten disorot

Adakah yang bisa menjelaskan perbedaan antara dua angka ini? Pada beberapa halaman angkanya dekat dan yang lainnya berbeda dengan jumlah yang cukup besar.

Mike
sumber
1
Menurut dokumen , saat ini "secara default Tabel Permintaan menampilkan sumber daya dengan baris kecil; klik tombol Gunakan baris permintaan besar untuk menambah ukuran setiap baris". Ini juga akan menampilkan Konten dalam kolom Ukuran.
Vadzim

Jawaban:

324

"Ukuran" adalah jumlah byte pada kabel, dan "konten" adalah ukuran sebenarnya dari sumber daya. Sejumlah hal dapat membuatnya berbeda, termasuk:

  • Dilayani dari cache (kecil atau 0 "ukuran")
  • Header respons, termasuk cookie ("ukuran" lebih besar dari "konten")
  • Redirect atau permintaan otentikasi
  • kompresi gzip ("ukuran" lebih kecil dari "konten", biasanya)

Dari dokumen :

Ukuran adalah ukuran gabungan dari header respons (biasanya beberapa ratus byte) ditambah badan respons, seperti yang disampaikan oleh server. Konten adalah ukuran konten yang diterjemahkan. Jika sumber daya dimuat dari cache browser daripada melalui jaringan, bidang ini akan berisi teks (dari cache).

Mark Brackett
sumber
2
@NiCkNewman Ya Ukuran adalah ukuran data aktual (bukan bandwidth btw) di seluruh kabel (Header + Konten digabungkan). Konten adalah ukuran Konten yang digembungkan dan tidak terkompresi (mis. Jika itu dizipkan) (Header dikecualikan!).
Israel
3
Pertanyaan bodoh, tetapi apakah kita menggunakan 1000 KB per MB di sini, atau 1024?
Buttle Butkus
2
@ButtleButkus: Chrome, Firefox dan IE / Edge semua menggunakan format JEDEC yang sudah ketinggalan zaman, di mana satu kilobyte adalah 1024 byte dan ditulis sebagai KB. Akan lebih baik jika mereka melaporkannya dalam format ISO (basis 10) atau menuliskannya sebagai KiB / MiB.
okdewit
1
Saya menggunakan Chrome Versi 60.0.3112.113 (Pembuatan Resmi) (64-bit) di Mac dan baru saja menemukan pertanyaan yang sama. Tangkapan layar dalam pertanyaan ini adalah satu-satunya cara saya dapat menentukan apa perbedaan antara angka abu-abu dan hitam. Versi Chrome yang saya gunakan saat ini tampaknya tidak menunjukkan "Konten" subpos. Kolom hanya mengatakan "Ukuran". Apakah ada di suatu tempat di dokumen atau di Chrome yang menjelaskan bahwa nomor abu-abu adalah "Konten". Saya tidak dapat menemukannya di mana pun.
flyingL123
1
Hanya perhatikan bahwa dalam versi baru chrome, angka abu-abu tidak muncul secara default, Anda harus mengklik tombol 'Gunakan baris permintaan besar' di bilah "Lihat" di bagian atas
Snekse
52

Sizeadalah ukuran respons itu sendiri, dan Contentadalah ukuran sumber daya, yang Anda akses.

Membandingkan:

cache kosong:

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

di-cache:

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

c69
sumber
4
Anda mungkin berarti " Sizeadalah ukuran respons itu sendiri [...]" ("sumber daya" juga memiliki arti berbeda dalam istilah HTTP).
Bruno
1
Apa yang dikatakan @Bruno. Jawaban ini salah dan seharusnya tidak diterima.
mhenry1384
Ya, ini adalah pembicaraan gila: PERMINTAAN 32K !?
iconoclast
1
zomg, Anda punya 1 tahun untuk mengedit jawaban saya. Hanya kesalahan ketik yang sederhana, jawaban yang jelas untuk pertanyaan sepele, dijawab dalam waktu 23 menit setelah pertanyaan diajukan, dan diterima karena membantu penulis untuk mengerti. Tidak tahu mengapa begitu banyak orang bahkan google dan mengunggulkannya ... begitu banyak rewel.
c69
7
Masuk akal untuk mengedit jawaban yang pada dasarnya benar, tetapi dapat ditingkatkan. Jawaban Anda agak pada batas, karena Anda mungkin bermaksud mengatakan Respon , tetapi tetap saja mengatakan Permintaan 32K menyesatkan siapa pun yang tidak tahu cukup untuk tahu itu harus benar-benar salah. (Itu adalah orang-orang yang mengajukan pertanyaan seperti ini, dan membutuhkan jawaban yang benar tentang mereka.) Juga, mengatakan sesuatu yang salah tidak memenuhi syarat sebagai kesalahan ketik . Itu adalah kesalahan fakta, bukan main-main, bahkan jika Anda bermaksud mengatakan sesuatu yang lain.
iconoclast
12

Secara sederhana, artikel Google menjelaskannya sebagai Ukuran = Ukuran transfer dan Konten = Ukuran aktual masukkan deskripsi gambar di sini

Ini adalah formula saya berdasarkan membaca berbagai artikel tentang topik ini (dan saya terbuka untuk memperbaikinya lebih lanjut dengan komentar Anda) Ukuran = Kompresi (Konten) + Header Respons

Lihat gambar yang digunakan dalam artikel ini

Penjelasan oleh Google

Vishwajit G
sumber
5

"Gunakan baris permintaan besar" untuk menampilkan kedua nilai!

Jika Anda tidak melihat nilai kedua (konten) Anda perlu mengklik tombol "Gunakan baris permintaan besar" di dalam tab Jaringan Chrome:

masukkan deskripsi gambar di sini

Saya menemukan ini berkat jawaban atas pertanyaan ini di sini:

Alat Chrome Devs - di mana ukuran dan kontennya?

Melayu
sumber