Question

我有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秒钟。所有这些时间延迟都在＆＃34; loading ...＆＃34;和＃34;加载＆＃34;。您可以从分析（chrome dev工具时间轴）中看到，它们之间没有进行任何处理：左侧调用堆栈用于＆＃34;单击＆＃34;事件，正确的是＃34;加载＆＃34;处理程序。中间是＆＃34; mri / t1 / axi / t1_axi_100.svg＆＃34;据称装载（顶部附近的长蓝色条）。

然而，当我在chrome dev工具下查看网络时，我看到每个＆＃34;下载＆＃34;步骤＆lt;仅4毫秒。（右侧窄蓝条;请注意大间隙）

您还可以在此处看到缓存已经起作用（来自磁盘缓存的svgs;来自内存缓存的嵌入式jpeg）。

此处显示了svg的4ms故障。

那为什么会有2秒的延迟？我的代码需要4毫秒，从缓存中检索似乎需要4毫秒！

＆＃34;网络＆＃34;中显示的标题标签是：

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就绪状态？

Answer 1

看起来服务器延迟了。

您可以在时间轴和网络标签上向我们展示两种不同的资源下载。第一个是t1_axi_100.svg，第二个是t1_axi_070.svg。可能浏览器只从缓存中获取t1_axi_070.svg。 t1_axi_100.svg的{{3}}在我的情况下是1.75秒。

Chrome延迟加载缓存的SVG文件

1 个答案: