使用 ChromeDev 工具在“DOMContentLoaded”之后加载 CSS

Question

我想在开发工具中的蓝线之后加载css（基本上是为了避免对内容进行块渲染）

为此，我使用以下脚本：(https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example)

   <script>
      var cb = function() {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = 'css/app.css';
        var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
      };
      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(cb);
      else window.addEventListener('load', cb);
    </script>

在我的开发工具页面底部，我可以看到 app.css 在蓝线之后加载，但是当我以谷歌速度洞察力检查网站时，它告诉我我的 app.css 仍然是块渲染。

这怎么可能？

Answer 1

您应该等待 DOM 内容加载。试试这个：

 document.addEventListener("DOMContentLoaded", function(event) {
   //Dom full loaded.
 });