为什么Google Plus使用XHR加载CSS并将其附加到<样式>而不是使用<link>

Why Google Plus load CSS with XHR and append it to a <style> instead using <link>?

本文关键字：样式 link XHR 使用 Plus Google 加载 CSS 为什么      更新时间：2023-09-26

分析新Google Plus的javascripts，我意识到Google Plus不是使用<link>来引用CSS文件，而是使用XHR从文件中加载它，然后创建一个<style>，然后将CSS内容加载到<style>。

谷歌使用这种方法加载CSS的原因是什么？

证明： 

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()

通过动态链接标记加载 CSS 是不可靠的，因为链接标记对加载和错误事件没有一致的浏览器支持。动态链接标签确实有效，但您不知道 CSS 是否以及何时加载。再加上它们是异步的，你不知道哪个先进来，你可能会得到错误的样式级联顺序。

相反，它通过 AJAX 将其作为字符串加载，因为 AJAX 具有可靠的成功和失败事件。然后，当收到字符串时，将其附加到样式标记。既然你知道事件，你就知道哪些进来了，哪些没有。

这牺牲了跨域 CSS 来了解 CSS 是否以及何时加载。

这是

Google+基础设施团队的工程师Mark Knichel给出的答案。

"你可能已经注意到，我们通过XHR而不是样式标签加载我们的CSS——这不是出于优化原因，而是因为我们达到了Internet Explorer每个样式表的最大CSS选择器限制！"

阅读整件事 https://plus.google.com/u/0/115060278409766341143/posts/ViaVbBMpSVG

考虑到这一点，谷歌开发人员报告说，通过从XHR切换到正常的<link>包含，性能得到了巨大的提升。

在支持SPDY的浏览器中，这导致了很大的延迟改善。在Chrome 27中，我们看到中位数加速了4倍，在第25个百分位数处加速了5倍。在 Firefox 21 中，我们看到中位数加速了 5 倍，第 25 个百分位数加速了 8 倍。在第99个百分位没有看到显着影响。

来源： https://plus.google.com/+IlyaGrigorik/posts/G6W7XVHXiED

相关文章：