2017-04-12 5 views
1

私は、HTMLページの中でデータuri base64でエンコードされた画像を直接インラインで使用しています。 私はどこでも、エンコードされていないイメージとは逆に、キャッシュに格納されていないことを読んでいます。これは実際にはパフォーマンス上の問題です。インラインbase64データuri(image)はどのようにキャッシュされますか?

しかし、私のクロムのdevのツールを見たとき、私は "メモリにキャッシュする" を参照してください...

enter image description here

はインライン化・イン・-HTMLいるbase64で画像キャッシュされましたか?

はいの場合:私は最初にチェックしました。私はbase64のインラインイメージをロードする時間を分析したかったからです。だから私は今最初のダウンロード/見て、それをデコードして読み込むのに費やす時間を参照して見ることができないのですか?私はブラウザの履歴をクリアしようとしましたが、他のキャッシュとは異なり(画像のような標準的なアセットのように)、ブラウザの履歴やキャッシュをクリアしても、次回ロード時にはまだchrome devツールを0ms/"メモリキャッシュから":どのようにして最初の訪問者に何が起こるかを確認できますか?

注:「ディセーブルキャッシュ」もちろんクロームのdevのツール内で選択されている をまた、私はそれが重要であるが、ここでのbase64とhtmlコード(それはかなり小さなです:未満900バイト)であることを確認していない。

は、
<div style="background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wAARCAAKAB4DAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABQYE/8QAJBAAAgEEAQMFAQAAAAAAAAAAAQIDAAQREgUTITEyQUJRcZL/xAAWAQEBAQAAAAAAAAAAAAAAAAAEAgP/xAAdEQACAgIDAQAAAAAAAAAAAAAAAQIDESEEInEx/9oADAMBAAIRAxEAPwCOtrYGJmdY36iEIerqUOR3I9/yqRJssYAk2jakg47HIpUFoNYygsZY7PmYmcqge2dYiQMb/Xfxmj8pPRvxWt5Bb6BYbyUB9hIRJqRgrnPmpqei7liQInmqiRIWsPUKVENIT5FQZeJJbUfId/SUW5934IpXReg7Mz8ldFyWJkfJJz8qx+JG7WWz/9k=');" ><a href="/home"> 

答えて

2

テストを繰り返すと、Chromeは2つのリクエストを行います.1つ目はHTMLページを取得し、通常のリクエストです.2つ目はイメージをフェッチしてメモリから取得します。 HTML自体に埋め込まれています。

言い換えれば、インラインイメージは、住んでいるのはキャッシュされています。

+0

インラインbase64がキャッシュされていると言っているのは、そこにあるHTMLファイルがキャッシュされているからです。しかし、HTMLページをキャッシュすることはできますか?私はイメージ、CSS、jsだけキャッシュすることができると思った? – Mathieu

+0

私がimageと言うとき、cc、jsはHTMLファイル(インライン)ではなく、外部ファイル(.css、.jsファイル...)内にある画像、css、jを意味することができます。 – Mathieu

+0

最初のおそらくキャッシュについて話すのは間違いですが、インラインリソースに対して別々のリクエストは実行されないため、Chromeは「メモリキャッシュ」からサービスを提供していると見なします。あなたの質問に答えて、確かにHTMLページは何でもキャッシュできます。しかし、動的に生成されるページでは、通常、ヘッダーがキャッシュされないように設定され、今日のほとんどのページは動的です。だから、インラインリソースは両刃の剣です! – user2612030

関連する問題