测量外部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" />