Why does Google Plus load CSS using XHR and add it to <style> instead using <link>?

By analyzing the new Google Plus javascripts, I realized that instead of using Google Plus <link>to link to a CSS file , Google Plus uses XHR to load from the file, then create <style>and then load the CSS content into <style>.

What is the reason Google uses this method to load CSS?

Evidence:

D = function(a) {
  var b = document.createElement("style");
  b.type = "text/css";
  document.getElementsByTagName("head")[0].appendChild(b);
  b.styleSheet ? b.styleSheet.cssText = a : b.appendChild(document.createTextNode(a))
};

var ia = function(a, b) {
  if(4 == b.readyState) {
    var d = window;
    $("xcl");
    b.onreadystatechange = k;
    var c = b.status;
    if(400 > c) {
      try {
        var e = b.getResponseHeader("X-Framework-CSS-Blocks"), f = b.responseText;
        if(e) {
          for(var e = e.split(","), g = c = 0;g < e.length;g++) {
            var V = Number(e[g]);
            D(f.substr(c, V));
            c += V
          }
          c < f.length && D(f.substr(c))
        }else {
          D(f), ha() && C("css", a, d.OZ_lang, "nooffsets")
        }
        d.setTimeout(function() {
          for(var b = i, c = 0, e = document.styleSheets.length;c < e;c++) {
            var g = document.styleSheets[c], g = g.cssRules || g.rules;
            0 < g.length && "sentinel" == g[g.length - 1].selectorText && (b = !0)
          }
          b || C("css", a, d.OZ_lang, "truncated." + f.length)
        }, 1E3)
      }catch(W) {
        throw d.console && d.console.warn(W), C("css", a, d.OZ_lang, "error"), W;
      }
    }else {
      C("css", a, d.OZ_lang, "status." + c)
    }
    $("xcr")
  }
}, ja = function() {
  var a = window.OZ_cssUrl;
  $("xcs");
  var b = ga();
  b.open("GET", a, !0);
  b.onreadystatechange = function() {
    ia(a, b)
  };
  b.send(h)
}

window.OZ_cssUrl && ja()
+3
source share
3 answers

This is a response asked by Mark Knickel, an engineer for the Google+ infrastructure team.

", , , , CSS XHR - , Internet Explorer CSS !"

https://plus.google.com/u/0/115060278409766341143/posts/ViaVbBMpSVG

+4

CSS , load error. , , CSS. , , , , .

AJAX , AJAX . , , . , , , .

CSS , CSS.

+6

, google , XHR <link>.

SPDY . Chrome 27 4x 5x 25- . Firefox 21 5- 8x 25- . 99- .

: https://plus.google.com/+IlyaGrigorik/posts/G6W7XVHXiED

+2

All Articles