javascript - 使用 ChromeDev 工具加载 "DOMContentLoaded"之后的 CSS

Question

我想在开发工具中加载蓝线后面的css(基本上是为了避免内容的 block 渲染)

为此，我使用以下脚本:( 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 在蓝线之后加载，但是当我以 google speed Insight 检查网站时，它告诉我我的 app.css 仍然是 block 渲染。

这怎么可能？

Answer 1

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

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