标签：javascript css google-plus

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

Google使用此方法加载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()

解决方法:

这是Google基础架构团队工程师Mark Knichel给出的答案.

“您可能已经注意到我们通过XHR而不是样式标记加载CSS – 这不是出于优化原因,这是因为我们在每个样式表中都达到了Internet Explorer的最大CSS选择器限制！”

在https://plus.google.com/u/0/115060278409766341143/posts/ViaVbBMpSVG阅读整篇文章

标签：javascript,css,google-plus
来源： https://codeday.me/bug/20190715/1469932.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。