Ajax Chrome延迟加载缓存的SVG文件

我有javascript代码，它请求SVG资源文件来显示

SVG不会改变。它大约100kb，包含一个嵌入式jpeg图像（作为

data:image/jpeg:base64

）。因此，如果可能的话，我希望浏览器能够缓存它

加载svg的代码如下所示

$(btn).click(function(){
    console.log("loading...");
    $(element).load("mri/t1/axi/t1_axi_100.svg", function(resp, status, xhr){
       console.log("loaded");
       ...
    });
});

看起来这需要2秒钟。所有这些时间延迟都在“加载…”和“加载”之间。您可以从评测（chrome dev tools timeline）中看到，在这两者之间没有进行任何处理：左边的调用堆栈用于“单击”事件，右边的调用堆栈用于“加载”处理程序。中间是一个间隙，据称“mri/t1/axi/t1_axi_100.svg”正在加载（顶部附近的蓝色长条）

然而，当我在chrome开发工具下查看网络时，我发现每个“下载”步骤只需<4毫秒。（右侧的蓝色窄条；注意较大的间隙）

您还可以在这里看到缓存已经工作（磁盘缓存中的SVG；内存缓存中的嵌入式JPEG）

此处显示了svg的4ms细分。

那么为什么会有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就绪状态没有被及时触发？

我觉得服务器延迟了

---

您在时间轴和网络选项卡上向我们展示了两种不同的资源下载。第一个是

t1\u axi\u 100.svg

，第二个是

t1\u axi\u 070.svg

。可能浏览器只从缓存中获取了

t1\u axi\u 070.svg

。对于

t1\u axi\u 100.svg

在我的情况下是1.75秒。

在我看来，服务器延迟

---

您在时间轴和网络选项卡上向我们展示了两种不同的资源下载。第一个是

t1\u axi\u 100.svg

，第二个是

t1\u axi\u 070.svg

。可能浏览器只从缓存中获取了

t1\u axi\u 070.svg

。对于

t1\u axi\u 100.svg

在我的例子中是1.75秒。

是的，但我想关键是，我希望两者都从缓存中获取。我在问题中提到的步骤应该是为了说明我是如何试图说服Chrome从缓存中获取svg文件的，但这似乎失败了？谢谢，请显示浏览器未缓存的SVG请求和响应的HTTP头。使用ChromeDevTools。是的，是的，但我想重点是，我希望两者都从缓存中获取。我在问题中提到的步骤应该是为了说明我是如何试图说服Chrome从缓存中获取svg文件的，但这似乎失败了？谢谢，请显示浏览器未缓存的SVG请求和响应的HTTP头。使用Chrome开发工具。