在 HTML5 中，脚本标签可以通过 async=true 异步加载
<script src="index.js" type="text/javascript" async="true"></script>
是否有任何等效的 CSS 资源？类似：
<link rel="stylesheet" type="text/css" async="true" href="style.css">
基本原理是让浏览器加载 css，并缓存它，以供以后的请求使用，但让其余的进程畅通无阻。 例如，在启动屏幕上。
【问题讨论】：
标签： javascript css html dom
我认为这行不通。
但是我们可以使用 JS 来做到这一点：
var resource = document.createElement('link');
resource.setAttribute("rel", "stylesheet");
resource.setAttribute("href","path/to/cssfile.css");
resource.setAttribute("type","text/css");
var head = document.getElementsByTagName('head')[0];
head.appendChild(resource);
我认为 它将实现您想要做的事情。
如果您不想使用javascript，请查看：How to load CSS asynchronously without using JavaScript?
希望对你有所帮助。
【讨论】：
css async 即，其余的 html 和这个 js script 也在做同样的事情，还有 op 标记 javascript 有问题。如果错了，请纠正我。
2021 年编辑： 原始链接已移动 - 没有 JavaScript 的异步 CSS https://codepen.io/tigt/post/async-css-without-javascript
“似乎这个技巧会导致 Chrome & Firefox 更早地启动 body， 而且他们根本不会阻止正文样式表。”
<head>
<!--[if IE]>
<link rel="stylesheet" href="style.css">
<![endif]-->
</head>
<body>
<!--[if !IE]> -->
<link rel="stylesheet" href="style.css" lazyload>
<!-- <![endif]-->
</body>
文章还包含基准：
【讨论】：
异步样式表加载不会阻止页面呈现，这对我来说非常有效（（考虑到 pageSpeed 见解））...
var stylesheet = document.createElement('link');
stylesheet.href = 'fontawesome.min.css';
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
// temporarily set media to something inapplicable to ensure it'll fetch without blocking render
stylesheet.media = 'only x';
// set the media back when the stylesheet loads
stylesheet.onload = function() {stylesheet.media = 'all'}
document.getElementsByTagName('head')[0].appendChild(stylesheet);
我能够以异步方式加载 fontawesome 图标的来源，而页面不会变慢或等待请求。
【讨论】：
您如何看待使用 jQuery 的解决方案？
jQuery('head').append('<link rel="stylesheet" type="text/css" href="path/to/cssfile.css" />');
【讨论】：
在不阻塞渲染的情况下加载 css
<link rel="preload" media="(min-width:801px)" href="styledesk.css" as="style">
<link rel="stylesheet" media="(min-width:801px)" href="styledesk.css">
更多信息在这里： https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
【讨论】：
我的两分钱：
默认情况下，使用 src 或 href 在正文中下载的所有外部文件都是异步的。
因此，不要将样式表的 link 标记（您希望以异步方式下载）放在 head 标记 中，而是将它们放在正文中的某个位置，最好是在顶端。示例：
<body>
<link rel="stylesheet" href="path/to/your/file">
<!--body content-->
</body>
脚本标签也是如此，如果您希望异步下载脚本，而不是将脚本标签放在头标签中，而是将其放在正文中的任何位置。在 body 内部的 script 标签中使用 async 属性是多余的，如果您希望在 DOM 加载后执行脚本，可以使用 defer 标签。
<body>
<script src="path/to/your/file"></script>
<!--body content-->
</body>
还有一点，async 和 defer 属性没有值，比如 true 或 false，它们的用法如下：
<script src="index.js" type="text/javascript" async></script>
<script src="index.js" type="text/javascript" defer></script>
<script src="index.js" type="text/javascript" defer></script>
所有这些都在 Chrome 83.0 上测试过
【讨论】：