Html 样式表上允许的 DEFER 或 ASYNC 包括？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25890729/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DEFER or ASYNC allowed on a stylesheet include?
提问by Doug
I know script files can use the DEFER and ASYNC keywords on a resource include. Do these keywords also work for stylesheet (i.e., CSS) includes?
我知道脚本文件可以在资源包含上使用 DEFER 和 ASYNC 关键字。这些关键字是否也适用于样式表（即 CSS）包含？
Syntax would presumably be:
语法大概是：
<link rel="stylesheet" type="text/css" href="./path/to/style.css" defer />
I just don't know if it's allowed or not.
就是不知道是否允许。
采纳答案by fmsf
Deferand Asyncare specific attributes of the tag <script>https://developer.mozilla.org/en/docs/Web/HTML/Element/script
Defer并且Async是标签的特定属性<script>https://developer.mozilla.org/en/docs/Web/HTML/Element/script
They will not work in other tags, because they don't exist there. A stylesheet is not a script that contains logic to be executed in parallel or after the loading. A stylesheet is a list of static styles that get applied atomically to html.
它们不会在其他标签中工作，因为它们不存在于那里。样式表不是包含要并行执行或在加载之后执行的逻辑的脚本。样式表是一个静态样式列表，这些样式以原子方式应用于 html。
回答by Gijs Erenstein
You could do this:
你可以这样做：
<link rel="stylesheet" href="/css/style.css" media="none" onload="if(media!=='all')media='all'" >
and create a noscript fallback
并创建一个 noscript 后备
回答by Robert Shaw
As of Jan 2019, this StackOverflow post still ranks #1 in some Google searches. Therefore, I am submitting this verylate answer for those who land here seeking to defer the loading of your CSS.
截至 2019 年 1 月，这篇 StackOverflow 帖子在某些 Google 搜索中仍排名第一。因此，我为那些在这里寻求推迟 CSS 加载的人提交这个非常晚的答案。
Credit:https://www.giftofspeed.com/defer-loading-css/
信用：https : //www.giftofspeed.com/defer-loading-css/
The gist
要点
Add the following above the closing </body>tag of your html document
</body>在 html 文档的结束标记上方添加以下内容
<script type="text/javascript">
/* First CSS File */
var giftofspeed = document.createElement('link');
giftofspeed.rel = 'stylesheet';
giftofspeed.href = '../css/yourcssfile.css';
giftofspeed.type = 'text/css';
var godefer = document.getElementsByTagName('link')[0];
godefer.parentNode.insertBefore(giftofspeed, godefer);
/* Second CSS File */
var giftofspeed2 = document.createElement('link');
giftofspeed2.rel = 'stylesheet';
giftofspeed2.href = '../css/yourcssfile2.css';
giftofspeed2.type = 'text/css';
var godefer2 = document.getElementsByTagName('link')[0];
godefer2.parentNode.insertBefore(giftofspeed2, godefer2);
</script>
回答by OZZIE
I can't find it documented anywhere but my findings are:
我在任何地方都找不到它的记录，但我的发现是：
How it was tested
它是如何测试的
- Tested onlywith Google Chrome version 61.0.3163.100 (Official version) (64 bits)
- Used Fast & Slow 3G throttling in dev tools.
- 经测试只有与谷歌的Chrome版本61.0.3163.100（正式版）（64位）
- 在开发工具中使用快速和慢速 3G 节流。
What I tested
我测试的
I have one stylesheet importing custom fonts and applying the fonts.
我有一个导入自定义字体并应用字体的样式表。
Before:
前：
Text using the custom font was invisible until it was fully loaded and then it appeared.
使用自定义字体的文本在完全加载然后出现之前是不可见的。
After/Result:
之后/结果：
So added => Result is that the text is visible immediately when the page is starting to render but using the fallback font, then after a while it switches to the custom font.
所以添加 => 结果是当页面开始呈现但使用后备字体时文本立即可见，然后过一段时间它切换到自定义字体。
So it seems like at least Google Chrome supports defer on <link>tags as well even if it's not documented anywhere publicly...
所以看起来至少谷歌浏览器也支持延迟<link>标签，即使它没有公开记录在任何地方......
