测量外部 CDN 资源的访问者 HTTP 缓存命中率

Question

我的网站使用几个常见的CDN托管资源，如bootstrap.css、jquery.js和fontawesome.css。是否可以获取信息，可能是使用 JavaScript，我的网站访问者是否在其 Web 浏览器中对这些资源有热缓存？

Answer 1

虽然不是答案，但我在使用Chrome处理此问题时发现了一些有趣的见解：

从 CDN 获取资源是一个延迟调用，而从缓存中获取项目实际上似乎是一个阻塞调用，尽管速度非常快。
Firefox 似乎并没有始终如一地表现出这种行为（我什至没有打扰 IE）。

为了进一步测试这一观察结果，我构建了以下小提琴，它在Chrome上可靠地工作。如果您有时间，请对自己的测试结果发表评论。

var testSource = function(href) {
  var timeLimit = 5;
  var l = document.createElement("link");
  l.rel = "stylesheet";
  l.type = "text/css";
  l.href = href;
  var s1 = document.createElement("script");
  s1.innerHTML = "window.d = new Date();";
  var s2 = document.createElement("script");
  s2.innerHTML = "window.d2 = new Date();";
  document.head.appendChild(s1);
  document.head.appendChild(l);
  document.head.appendChild(s2);
  window.setTimeout(function() {
      var p = document.createElement("p");
      if (typeof(d2) === "undefined" || d2 - d > timeLimit) {
        p.innerHTML = "guess cache";
      } else {
        p.innerHTML = "guess load";
      }
      p.innerHTML += " (" + href + ")";
      document.body.appendChild(p);
    },
    timeLimit * 10);
}
btn.onclick = function() {
  testSource(inp.value);
}

<input type="text" id="inp" value="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<input type="button" id="btn" value="test url" />