渲染拦截的CSS - 推迟加载的CSS文件

Question

我想解决渲染bloking为我的网站，但有问题与他们。 我加载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> 

但在“谷歌网页速度的工具>见解”是渲染封锁CSS文件。 帮我解决吧^ _^

Answer 1

你可以有不同的媒体不同的样式，

<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"> 

媒体，你可以编写最大宽度，最大高度，最小宽度，最小分辨率多见于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>