5

My site uses several common CDN hosted resources, like bootstrap.css, jquery.js and fontawesome.css. Is it possible to get information, probably with JavaScript, do my site visitors have warm caches for these resources in their web browsers?

Mikko Ohtamaa
  • 82,057
  • 50
  • 264
  • 435
  • 1
    I suppose you could measure load times, but that would be flaky at best. I'm not aware of any "standard" solution to query a specific browser's cache state. Add-ons may have access to that information, though. – Frédéric Hamidi Apr 28 '15 at 22:10
  • Take jQuery specifically. Could you do a `var isLoaded = (jQuery) ? true : false;` and then load the library off the CDN if needed, in that conditional block then also load a pixel / make an xhr request to your server? Is the idea just to measure this for a while? – ficuscr Apr 28 '15 at 22:19
  • Related: http://www.sitepoint.com/mozilla-to-tackle-browser-css-history-privacy-leak/ – Mikko Ohtamaa Apr 29 '15 at 11:27

1 Answers1

2

While not an answer, some interesting insight I found when working on this problem with Chrome:

Fetching the resource from CDN is a deferred call, while fetching an item from the cache seems in fact to be a blocking call, despite being quite fast.
Firefox didn't seem to this exhibit behavior consistently (and I didn't even bother with IE).

To test this observation further, I built the following small fiddle, which works reliably for me on Chrome. Please leave a comment on your own test results if you have the time.

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" />
Etheryte
  • 24,589
  • 11
  • 71
  • 116
  • 1
    Works on Chrome desktop, does not work Firefox, as you said. Hopefully similar mechanism can be found for all browsers. – Mikko Ohtamaa Apr 28 '15 at 23:08
  • This could be also considered as a privacy leak: http://www.sitepoint.com/mozilla-to-tackle-browser-css-history-privacy-leak/ so maybe check if this work for every resoucre or certain kind of URLs only? – Mikko Ohtamaa Apr 29 '15 at 11:28