"Optimize CSS Delivery" - 为什么 Google 使用这么多代码来加载 CSS 文件？

Question

这是Google Optimize CSS Delivery page。在底部 google 建议使用此代码在页面正文末尾加载 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 之后请求 CSS页面已完成加载。这是一种手动为 <link> 元素赋予与 <script> 元素的 defer 属性类似的行为的方法。

"Optimize CSS Delivery" - 为什么 Google 使用这么多代码来加载 CSS 文件？

"Optimize CSS Delivery" - Why Google uses this much code to load CSS file?

css

performance

pagespeed