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是在蓝线后加载的，但是当我在google speed insight上检查网站时它告诉我我的app.css仍然是块渲染。

这怎么可能？

Answer 1

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

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

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

1 个答案: