Javascript 渲染块css-延迟加载css文件

我试图解决我的网站渲染堵塞，但有他们的问题。 我使用以下代码加载css文件：

<script>
  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);
</script>

<noscript id="deferred-styles">
  <link href="/template/styles/main.min.css" rel="stylesheet">    
  <link href="/template/styles/style.min.css" rel="stylesheet">
  <link href="/template/styles/bootstrap.min.css" rel="stylesheet">
  <link href="/template/styles/bootstrap-flipped.css" rel="stylesheet">
  <link href="/template/styles/swiper.min.css" rel="stylesheet" >
  <link href="/template/styles/fontiran.min.css" rel="stylesheet">
  <link href="/template/styles/font-awesome.min.css" rel="stylesheet">
  <link href="/template/styles/animate.min.css" rel="stylesheet">
  <link href="/template/styles/owl.carousel.css" rel="stylesheet">
  <link href="/template/styles/owl.transitions.css" rel="stylesheet">
  <link href="/template/styles/responsive.css" rel="stylesheet">
  <link href="/template/styles/theme-default.css" rel="stylesheet" type="text/css" />
</noscript>

var loadDeferredStyles=函数（）{
var addStylesNode=document.getElementById（“延迟样式”）；
var替换=document.createElement（“div”）；
replacement.innerHTML=addStylesNode.textContent；
document.body.appendChild（替换）
addStylesNode.parentElement.removeChild（addStylesNode）；
};
var raf=requestAnimationFrame | | mozRequestAnimationFrame||
webkitRequestAnimationFrame | | msRequestAnimationFrame；
if（raf）raf（function（）{window.setTimeout（loadDeferredStyles，0）；}）；
else窗口。addEventListener（'load'，loadDeferredStyles）；

但在“谷歌页面速度工具>洞察”中，呈现阻止css文件。

---

请帮我解决这个问题^ ^

您可以为不同的媒体使用不同的样式表

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
<link rel="stylesheet" media="screen and (max-height:700px)" href="style-max-700-height.css">

在介质中，您可以像“最大宽度”、“最大高度”、“最小宽度”、“最小分辨率”这样写入，请参阅 而且

---

我认为您需要先添加CSS，然后运行JavaScript。对于此代码，控制台上可能会出现JavaScript错误

<noscript id="deferred-styles">
  <link href="/template/styles/main.min.css" rel="stylesheet">    
  <link href="/template/styles/style.min.css" rel="stylesheet">
  <link href="/template/styles/bootstrap.min.css" rel="stylesheet">
  <link href="/template/styles/bootstrap-flipped.css" rel="stylesheet">
  <link href="/template/styles/swiper.min.css" rel="stylesheet" >
  <link href="/template/styles/fontiran.min.css" rel="stylesheet">
  <link href="/template/styles/font-awesome.min.css" rel="stylesheet">
  <link href="/template/styles/animate.min.css" rel="stylesheet">
  <link href="/template/styles/owl.carousel.css" rel="stylesheet">
  <link href="/template/styles/owl.transitions.css" rel="stylesheet">
  <link href="/template/styles/responsive.css" rel="stylesheet">
  <link href="/template/styles/theme-default.css" rel="stylesheet" type="text/css" />
</noscript>

<script>
  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);
</script>

var loadDeferredStyles=函数（）{
var addStylesNode=document.getElementById（“延迟样式”）；
var替换=document.createElement（“div”）；
replacement.innerHTML=addStylesNode.textContent；
document.body.appendChild（替换）
addStylesNode.parentElement.removeChild（addStylesNode）；
};
var raf=requestAnimationFrame | | mozRequestAnimationFrame||
webkitRequestAnimationFrame | | msRequestAnimationFrame；
if（raf）raf（function（）{window.setTimeout（loadDeferredStyles，0）；}）；
else窗口。addEventListener（'load'，loadDeferredStyles）；

你得到这份工作了吗？