2017-01-17 6 views
0

表示用に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」がロードされているギャップ(上部の長い青いバー)があります。

enter image description here

私はクロームのdevのツールの下のネットワークで見たときしかし、私は、「ダウンロード」の各ステップのみ< 4ミリ秒を要していることがわかります。 (右側の狭い青いバーは、大きなギャップに注意してください)(;メモリキャッシュからJPEGファイルを埋め込まれたディスクキャッシュからsvgs)を

enter image description here

また、キャッシングが働いていることをここで見ることができます。

ここではsvgの4msの内訳を示します。 enter image description here

なぜ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準備完了状態が適時にトリガされていない可能性がありますか?

答えて

0

私にはサーバーの遅延のようです。

[タイムライン]タブと[ネットワーク]タブで、2種類のリソースのダウンロードを表示します。最初はt1_axi_100.svg、もう1つはt1_axi_070.svgです。おそらくブラウザはキャッシュからt1_axi_070.svgしか取らなかったでしょう。私のケースでは、t1_axi_100.svgTTFBは1.75秒でした。

関連する問題