我正在尝试消除在我的网站上被阻止的2个CSS文件-它们出现在Google Page Speed Insights中。我采用了不同的方法，但都没有成功。但是，最近，我发现了一篇有关Thinking Async的文章，以及当我应用此代码时的文章：<script async src="https://third-party.com/resource.js"></script>它确实消除了问题。
但是，发布后，页面失去了样式。我不太确定发生了什么，因为代码可以正常工作，但是上传后的样式无效。感谢您的帮助。谢谢
Answers:
触发异步样式表下载的技巧是使用一个<link>元素并为media属性设置一个无效值（我正在使用media =“ none”，但任何值都可以）。当媒体查询的结果为false时，浏览器仍将下载样式表，但是在呈现页面之前，它不会等待内容可用。
<link rel="stylesheet" href="css.css" media="none">
样式表下载完成后，必须将media属性设置为有效值，以便将样式规则应用于文档。onload事件用于将媒体属性切换为所有：
<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">
这种加载CSS的方法将比标准方法更快地将可用内容交付给访问者。仍然可以使用通常的阻止方法（或者可以内联它以获得最终性能）来为关键CSS提供服务，并且可以在以后的解析/渲染过程中逐步下载和应用非关键样式。
该技术使用JavaScript，但是您可以通过将等效的阻塞<link>元素包装在一个<noscript>元素中来迎合非JavaScript浏览器：
<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'"><noscript><link rel="stylesheet" href="css.css"></noscript>
您可以在www.itcha.edu.sv中查看操作
preload在Firefox和较旧的浏览器上支持-请参阅该答案的第一条评论中的链接]。
简单答案（完整的浏览器支持）：
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
记录的答案（带有可选的预加载和禁用脚本的后备功能）：
<!-- Optional, if we want the stylesheet to get preloaded. Note that this line causes stylesheet to get downloaded, but not applied to the page. Use strategically — while preloading will push this resource up the priority list, it may cause more important resources to be pushed down the priority list. This may not be the desired effect for non-critical CSS, depending on other resources your app needs. -->
<link rel="preload" href="style.css" as="style">
<!-- Media type (print) doesn't match the current environment, so browser decides it's not that important and loads the stylesheet asynchronously (without delaying page rendering). On load, we change media type so that the stylesheet gets applied to screens. -->
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
<!-- Fallback that only gets inserted when JavaScript is disabled, in which case we can't load CSS asynchronously. -->
<noscript><link rel="stylesheet" href="style.css"></noscript>
预加载和异步结合在一起：
如果您需要预加载和异步CSS，则此解决方案只需将上面记录的答案中的两行结合起来，使其更加简洁。但这要在Firefox支持preload关键字后才能起作用。再次，如上面记录的答案中所述，预加载实际上可能没有任何好处。
<link href="style.css" rel="preload" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>
其他注意事项：
请注意，通常，如果您要异步加载CSS，通常建议您内联关键CSS，因为CSS是有原因的渲染阻止资源。
感谢filament group的许多异步CSS解决方案。
onload="this.rel='stylesheet'; this.onload = null"。显然，有必要进行设置this.onload以null避免在某些浏览器中两次调用此方法。
media="print"和onload丝线小组最近（2019年7月）发表了一篇文章，针对如何异步加载CSS给出了他们的最新建议。即使他们是流行的Javascript库loadCSS的开发人员，他们实际上还是建议使用不需要Javascript库的解决方案：
<link
rel="stylesheet"
href="/path/to/my.css"
media="print"
onload="this.media='all'; this.onload = null"
>
使用media="print"将指示浏览器不要在屏幕上使用此样式表，而在打印时使用。浏览器实际上确实下载了这些打印样式表，但是异步地下载了，这正是我们想要的。我们还希望样式表在下载后就使用，并为此设置onload="this.media='all'; this.onload = null"。（某些浏览器将调用onload两次，以解决此问题，我们需要进行设置this.onload = null。）如果需要，您可以<noscript>为未启用Javascript的罕见用户添加备用。
在原来的文章值得一读，因为它进入更详细的比我在这里。csswizardry.com上的这篇文章也值得一读。
您可以尝试通过多种方式获得它：
1.使用media="bogus"和<link>脚
<head>
<!-- unimportant nonsense -->
<link rel="stylesheet" href="style.css" media="bogus">
</head>
<body>
<!-- other unimportant nonsense, such as content -->
<link rel="stylesheet" href="style.css">
</body>
2.以旧方式插入DOM
<script type="text/javascript">
(function(){
var bsa = document.createElement('script');
bsa.type = 'text/javascript';
bsa.async = true;
bsa.src = 'https://s3.buysellads.com/ac/bsa.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>
3.如果您可以尝试插件，则可以尝试 loadCSS
<script>
// include loadCSS here...
function loadCSS( href, before, media ){ ... }
// load a file
loadCSS( "path/to/mystylesheet.css" );
</script>
<script>改为，您是否知道示例2是否也适用于CSS <style rel=stylesheet>？（只是好奇。loadCSS如果以后需要加载CSS，我将改用（即您的示例3）。）
下面的函数将创建所有要异步加载的样式表并将其添加到文档中。（但是，由于有了Event Listener，它只会在加载了所有其他窗口资源之后才这样做。）
请参阅以下内容：
function loadAsyncStyleSheets() {
var asyncStyleSheets = [
'/stylesheets/async-stylesheet-1.css',
'/stylesheets/async-stylesheet-2.css'
];
for (var i = 0; i < asyncStyleSheets.length; i++) {
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', asyncStyleSheets[i]);
document.head.appendChild(link);
}
}
window.addEventListener('load', loadAsyncStyleSheets, false);
var newStyle = document.createElement("link"); newStyle.rel = "stylesheet"; newStyle.href = "stylesheet.css"; document.getElementsByTagName("head")[0].appendChild(newStyle);的<script>标记内的经典代码可以很好地发挥作用-即使在像MSIE8这样的旧浏览器中也是如此。
window.load事件。因此，下载所有内容后便开始下载。那里没有运气。您需要尽快启动非阻塞加载。
<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">
如果您需要以编程方式和异步方式加载CSS链接，请执行以下操作：
// https://www.filamentgroup.com/lab/load-css-simpler/
function loadCSS(href, position) {
const link = document.createElement('link');
link.media = 'print';
link.rel = 'stylesheet';
link.href = href;
link.onload = () => { link.media = 'all'; };
position.parentNode.insertBefore(link, position);
}
如果你有一个严格的内容安全策略不允许@弗拉基米尔Salguero海湾的答案，你可以使用这个（请注意脚本nonce）：
<script nonce="(your nonce)" async>
$(document).ready(function() {
$('link[media="none"]').each(function(a, t) {
var n = $(this).attr("data-async"),
i = $(this);
void 0 !== n && !1 !== n && ("true" == n || n) && i.attr("media", "all")
})
});
</script>
只需将以下内容添加到样式表参考中：media="none" data-async="true"。这是一个例子：
<link rel="stylesheet" href="../path/script.js" media="none" data-async="true" />
jQuery的示例：
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" type="text/css" media="none" data-async="true" crossorigin="anonymous" /><noscript><link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" type="text/css" /></noscript>
async属性已被忽略，因为script标签没有src异步加载的功能...还是在这里真的有用吗？您还可以详细说明用作哪个值nonce吗？
请注意更新答案，因为上述所有内容现在都无法打动Google Pagespeed见解。
根据Google的介绍，这是您应该如何实现CSS的异步加载
< noscript id="deferred-styles" >
< link rel="stylesheet" type="text/css" href="small.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 = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script>