Question

在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并缓存它，以便以后的请求，但让其余的进程解除阻塞。比如，一个闪屏。

Answer 1

今天的最佳方法，在以下文章中描述：
"Async" CSS without JavaScript
我敦促所有读者 - 阅读文章，因为它深入研究了已知的“黑客”和变通方法。

“看来这个技巧会让Chrome＆amp; Firefox更早启动，并且他们根本不会阻止身体样式表。“

<head>
  <!--[if IE]>
    <link rel="stylesheet" href="style.css"> 
  <![endif]-->
</head>
<body>
    <!--[if !IE]> -->
        <link rel="stylesheet" href="style.css" lazyload>
  <!-- <![endif]-->
</body>

该文章还包含基准：

Answer 2

我认为这不会奏效。

但我们可以使用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?

希望它能提供帮助。

Answer 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 图标的来源，而不会减慢页面速度或等待请求。

Answer 4

您如何看待使用jQuery的解决方案？

jQuery('head').append('<link rel="stylesheet" type="text/css" href="path/to/cssfile.css" />');

Answer 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

Answer 6

我的两分钱

默认情况下，要使用主体内部的 src或href下载的所有外部文件都是异步的。

因此，不要将样式表（您希望以异步方式下载的）的 link标记放在 head标记中，而是将其放置在体内的某个位置，最好放在顶端。示例：

<body>
    <link rel="stylesheet" href="path/to/your/file">
    <!--body content-->
</body>

脚本标签也是如此，如果您希望异步下载脚本，则可以将脚本标签放在正文中的任何位置，而不是将脚本标签放在head标签中。在主体内部的脚本标记中使用async属性是多余的，如果希望在DOM加载后执行脚本，则可以使用defer标记。

<body>
    <script src="path/to/your/file"></script>
    <!--body content-->
</body>

另一件事，异步和延迟属性没有值，例如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上进行了测试

css链接标记的async = true

6 个答案: