表示用にSVGリソースファイルを要求するjavascriptコードがあります。キャッシュされたSVGファイルをロードするChromeの遅延
SVGは変更されません。 1つの埋め込みJPEG画像(data:image/jpeg:base64
)を含む約100kbです。可能であれば、ブラウザにキャッシュしてもらいたいです。
SVGをロードするためのコードは、これが2秒を要すると思われるこの
$(btn).click(function(){
console.log("loading...");
$(element).load("mri/t1/axi/t1_axi_100.svg", function(resp, status, xhr){
console.log("loaded");
...
});
});
のようなものです。この時間遅延はすべて、「ロード中...」と「ロード済み」の間にあります。あなたはプロファイリング(クロム開発ツールのタイムライン)から、処理が進行中でないことがわかります。左側のコールスタックは「クリック」イベント用、右側は「ロード済み」ハンドラ用です。その間には、「mri/t1/axi/t1_axi_100.svg」がロードされているギャップ(上部の長い青いバー)があります。
私はクロームのdevのツールの下のネットワークで見たときしかし、私は、「ダウンロード」の各ステップのみ< 4ミリ秒を要していることがわかります。 (右側の狭い青いバーは、大きなギャップに注意してください)(;メモリキャッシュからJPEGファイルを埋め込まれたディスクキャッシュからsvgs)を
また、キャッシングが働いていることをここで見ることができます。
なぜ2秒の遅延がありますか?私のコードは4ミリ秒かかり、キャッシュからの検索には4ミリ秒かかります! 「ネットワーク」タブに表示
ヘッダは以下のとおりです。
General
Request URL:http://homphysiology.org/neurosim/basic/slices/mri/t1/axi/t1_axi_100.svg
Request Method:GET
Status Code:200 OK (from disk cache)
Remote Address:173.254.28.84:80
Response Headers
Accept-Ranges:bytes
Cache-Control:max-age=2592000
Content-Encoding:gzip
Content-Type:image/svg+xml
Date:Tue, 17 Jan 2017 15:49:02 GMT
Expires:Thu, 16 Feb 2017 15:49:02 GMT
Last-Modified:Thu, 11 Aug 2016 18:26:42 GMT
Server:nginx/1.10.2
Vary:Accept-Encoding
X-Content-Type-Options:nosniff
Request Headers
Provisional headers are shown
Accept:text/html, */*; q=0.01
Referer:http://homphysiology.org/neurosim/basic/case2_nonlinear.html
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
X-Requested-With:XMLHttpRequest
がサーバーにポーリングさChromeと応答を待ってもらえますか? もしそうなら、私はこれを防ぐことができますか?あるいは、XHR準備完了状態が適時にトリガされていない可能性がありますか?