Chrome開発ツール-「サイズ」と「コンテンツ」


254

Chromeの開発ツールの[ネットワーク]タブでスタイルシートに関する情報を表示すると、1つの列で「サイズ」と「コンテンツ」の両方が指定されます。

サイズ/コンテンツ列が強調表示された開発ツールのスクリーンショット

誰かがこれらの2つの数値の違いを明らかにすることはできますか?一部のページでは数値が近い場合と、かなり異なる場合があります。


1
docsによると、現在、「デフォルトではリクエストテーブルには小さな行のリソースが表示されます。[大きなリクエスト行を使用]ボタンをクリックして、各行のサイズを増やします」。これにより、[サイズ]列にコンテンツも表示されます。
Vadzim 2016

回答:


324

「サイズ」はネットワーク上のバイト数で、「コンテンツ」はリソースの実際のサイズです。次のような多くのことが、それらを異なるものにする可能性があります。

  • キャッシュから提供される(小さいまたは0「サイズ」)
  • Cookieを含む応答ヘッダー(「コンテンツ」よりも「サイズ」が大きい)
  • リダイレクトまたは認証リクエスト
  • gzip圧縮(通常、「コンテンツ」よりも「サイズ」が小さい)

ドキュメントから

サイズは、サーバーから配信される、応答ヘッダー(通常は数百バイト)と応答本文の合計サイズです。コンテンツは、リソースのデコードされたコンテンツのサイズです。リソースがネットワーク経由ではなくブラウザのキャッシュから読み込まれた場合、このフィールドには(キャッシュからの)テキストが含まれます。


2
@NiCkNewmanはいサイズは、ワイヤ全体の実際のデータサイズ(帯域幅ではなく)です(ヘッダーとコンテンツを組み合わせたもの)。コンテンツは、膨張した非圧縮コンテンツ(gzipされた場合など)のみのサイズです(ヘッダーは除外されます!)。
イスラエル

3
ばかげた質問ですが、ここでは1 MBあたり1000 KB、または1024を使用していますか?
Buttle Butkus

2
@ButtleButkus:Chrome、Firefox、IE / Edgeはすべて、古いJEDEC形式を使用しています。この場合、キロバイトは1024バイトで、KBとして記述されます。ISO形式(base 10)で報告するか、KiB / MiBとして書き込むとよいでしょう。
okdewit 2016年

1
MacでChromeバージョン60.0.3112.113(公式ビルド)(64ビット)を使用していますが、同じ質問に出くわしました。この質問のスクリーンショットは、灰色と黒の数値の違いを判断する唯一の方法です。私が使用しているChromeの現在のバージョンでは、「コンテンツ」という小見出しが表示されないようです。列には「サイズ」とだけ書かれています。灰色の数字が「コンテンツ」であることを説明するドキュメントまたはChromeのどこかにありますか。どこにも見つかりません。
flyingL123 '19 / 09/19

1
Chromeの

52

Sizeは応答自体Contentのサイズであり、アクセスしているリソースのサイズです。

比較:

空のキャッシュ:

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

キャッシュ:

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


4
おそらく「応答自体Sizeのサイズです[...]」(「リソース」もHTTP用語では異なる意味を持っています)。
ブルーノ

1
@Brunoが言ったこと。この答えは間違っており、受け入れられるべきではありませんでした。
mhenry1384 2012

はい、これはクレイジーな話です:32K 要求!?
iconoclast

1
zomg、あなたは私の答えを編集するために1年がありました。単純なタイプミス、ささいな質問に対する明白な答えは、質問が出されてから23分以内に回答され、著者が理解するのに役立つので受け入れられました。なぜそんなに多くの人々がグーグルで賛成投票するのかわからない...何もないことから大騒ぎ。
c69

7
基本的には正しいが、改善できる回答を編集することは理にかなっています。あなたはおそらくので、あなたの答えは、ソート境界上のある意味言ってレスポンスを、それでも言っリクエストは 32Kが、それは完全に偽でなければなりませんでした知っているのに十分を知らなかった人には誤解されました。(これは、このような質問をし、それらについて正しい答えを必要とする人々です。)また、何か間違っていると言ってもタイプミスとは見なされません。他のことを言うつもりであったとしても、それは事実の誤りであり、ファットフィンガーではありません。
iconoclast

12

簡単に言うと、Googleの記事では、サイズ=転送サイズ、コンテンツ=実際のサイズとして説明しています。 ここに画像の説明を入力してください

これは、このトピックに関するさまざまな記事を読んだことに基づく私の公式です(そして、私はあなたのコメントでさらに改善するために開いています) サイズ=圧縮(コンテンツ)+応答ヘッダー

この記事で使用されている画像を参照してください

グーグルによる説明


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.