“优化 CSS 交付” - 为什么 Google 使用这么多代码来加载 CSS 文件？

Question

这是Google Optimize CSS Delivery page。在底部谷歌建议使用此代码在页面正文的末尾加载 CSS 文件：

  <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>

我的问题是为什么不只使用这一行来完成这项工作？尤其是我们身处 HTML5 世界。

<link rel="stylesheet" type="text/css" href="small.css"/>
</body>

Answer 1

当浏览器解析 HTML 响应时，它会逐行解析。当它遇到<link> 元素时，它会停止解析HTML，并去获取由元素的href 属性设置的资源。

代码所做的是将 CSS 包装在 <noscript> 元素中作为后备元素，而不是阻止页面加载，而是在页面完成加载后请求 CSS。这是一种手动为<link> 元素赋予与<script> 元素的defer 属性类似的行为的方法。