нагрузка CSS после того, как «DOMContentLoaded» с ChromeDev Tool

Question

Я хочу, чтобы загрузить CSS после синей линии в инструменте DEV (в основном, чтобы избежать блока рендеринга для содержания)

Для этого я использую следующий сценарий: (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> 

в нижней части моей страницы в Dev инструмент, я могу видеть, что app.css загружается после синей линии, однако, когда я проверить сайт на Google скорости прозрения он говорит мне, что мое приложение .css все еще блокирует рендеринг.

Как это возможно?

Answer 1

Вам нужно подождать, пока содержимое DOM не загрузится. Попробуйте следующее:

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