async=true 用于 css 链接标签
Posted
技术标签:
【中文标题】async=true 用于 css 链接标签【英文标题】：async=true for css link tag 【发布时间】：2014-07-24 02:08:23 【问题描述】：在 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，并缓存它，以供以后的请求使用，但让其余的进程畅通无阻。 例如，在启动屏幕上。
【问题讨论】：
css 在页面加载时应用，异步如何工作？ 我猜它会在样式可用时应用它们。 @serakfalcon 不是。谷歌字体块渲染页面 【参考方案1】：我认为这行不通。
但是我们可以使用 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?
希望对你有所帮助。
【讨论】：
这绝对与问题无关。 @RPM 怎么样？根据 OP，他想加载css async 即，其余的 html 和这个 js script 也在做同样的事情，还有 op 标记 javascript 有问题。如果错了，请纠正我。
谢谢。这就是我最终做的事情，它适用于我的情况（急于加载缓存）。
非常感谢！ +1 使用原生 javascript【参考方案2】：
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>
文章还包含基准：
【讨论】：
链接失效 已修复，网址已移动【参考方案3】：异步样式表加载不会阻止页面呈现，这对我来说非常有效（（考虑到 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 图标的来源，而页面不会变慢或等待请求。
【讨论】：
【参考方案4】：您如何看待使用 jQuery 的解决方案？
jQuery('head').append('<link rel="stylesheet" type="text/css" href="path/to/cssfile.css" />');
【讨论】：
【参考方案5】：在不阻塞渲染的情况下加载 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
【讨论】：
很有趣，但正如codepen.io/tigt/post/async-css-without-javascript 中提到的那样，如果您针对的是旧浏览器，这将无济于事，因为那里不存在此功能。【参考方案6】：我的两分钱：
默认情况下，使用 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 上测试过
【讨论】：
以上是关于async=true 用于 css 链接标签的主要内容，如果未能解决你的问题，请参考以下文章
SAMLRequest 403 在 css 链接标签中拒绝访问