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属性提供类似行为的方法。

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

1 个答案: