Joomla消除了渲染阻止CSS

Question

我已阅读文章https://www.giftofspeed.com/defer-loading-css/和http://keithclark.co.uk/articles/loading-css-without-blocking-render/。

我在$ document-＆gt; addStyleSheet

中添加了一些css

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.vnsinfo.com%2Fsilva%2F&tab=desktop

但是我看到有一些渲染阻塞css。您可以从以下网址查看相同内容：

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.vnsinfo.com%2Fsilva%2F&tab=desktop

如何添加行onload =＆＃34; if（media！=＆＃39; all＆＃39;）media =＆＃39; all＆＃39;＆＃34;通过$ document-＆gt; addStyleSheet？

或者，我可以使用以下代码将Joomla css用于外部css吗？

@section scripts {
<script type="text/javascript">
  $(function () {
  $('#Check_Date').datetimepicker({
    defaultDate: '@DateTime.Now',
    locale: 'en',
    widgetPositioning: {
        vertical: 'bottom',
        horizontal: 'left'
    }
});
});
</script>
}

Answer 1

$document = JFactory::getDocument();    
$document->addCustomTag('<noscript id="deferred-styles"><link rel="stylesheet" type="text/css" href="small.css"/></noscript>');
$document->addScriptDeclaration("
      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 = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
   ");