新しいImage（）。src = "同じurl"を2回コーディングしますが、ブラウザはただ1つのリクエストをキャッチできます

Question

次のコードを見てください。 Chromeは1つのリクエストをデバッグコンソールに記録します。これがキャッシングのためである場合、なぜ2つのリクエストが最後のリクエストを304で記録しないのですか？

このブラウザの動作について説明しますか？

<script> 
    new Image().src="//stackoverflow.com/" 
    new Image().src="//stackoverflow.com/" 
</script> 

Answer 1

同じ画像を2回要求しています。この動作はHTML5仕様で実際に説明されています。引用：リソースは、絶対URLによって識別され、リソースが冪等のアクションを使用して得られる である

場合（例えば、HTTP GET又は 相当）、それは既に他の理由のためにダウンロードされています （例えば、別のこのアルゴリズムの呼び出し）、およびこの要求が前のもの（例えば、同じAcceptとOrigin ヘッダ）、およびユーザエージェントと同一 になり、それが既存のダウンロードから データを再利用するように構成されています新しいものを起動するのではなく、 を実行してから、0を開始する代わりに既存のダウンロードの結果を使用します新しいもの。

HTML5 > Common infrastructure > Fetching resources > Processing model

基本的に、それはあなたが正確に同じリソースを複数回要求した場合、ブラウザは一度だけ（または全くそれをダウンロードし、代わりにキャッシュからサーブ）、それをダウンロードすることを言います。逆の順序で

関連スペック：

• HTML5 > Common infrastructure > Fetching resources > CORS-enabled fetch
• HTML5 > Embedded content > The img element > update the image data

Answer 2

ブラウザはすでに画像をダウンロードしていますが、同じ画像に対して別の要求を行う理由は何ですか？ページ上でイメージが複数回使用されると（それは定期的に発生します）、使用されている各インスタンスに対して個別の要求を行うと、大量の不要なオーバーヘッドが発生します。同じページ内の同じURLを持つ2つの画像は同じ画像とみなされます。