【问题标题】:async=true for css link tagasync=true 用于 css 链接标签
【发布时间】: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 不是。谷歌字体块渲染页面

标签: javascript css html dom


【解决方案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

      【讨论】:

      【解决方案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 上测试过

      【讨论】:

        猜你喜欢
        • 2020-05-10
        • 1970-01-01
        • 1970-01-01
        • 2015-08-26
        • 2021-12-21
        • 1970-01-01
        • 2022-07-15
        • 2023-03-25
        • 1970-01-01
        相关资源
        最近更新 更多