Question

我试图为我的网站解决渲染问题但是他们有问题。我使用以下代码加载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>

但是＆＃34;谷歌页面速度工具＆gt;见解＆＃34;是渲染阻止CSS文件。帮我解决一下^ _ ^

Answer 1

您可以为不同的媒体设置不同的样式表

%%~snxf    Short name and short extension of the element being referenced by %%f
%%~snf     Short name of the element being referenced by %%f
%%~sxf     Short extension of the element being referenced by %%f

在媒体中你可以写成最大宽度，最大高度，最小宽度，最小分辨率在https://www.w3schools.com/cssref/css3_pr_mediaquery.asp看更多并且 https://www.w3schools.com/tags/att_link_media.asp

Answer 2

我认为您需要先添加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>

渲染阻塞css - 延迟加载css文件

2 个答案: