Question

运行Google PageSpeed后，建议我使用async或defer作为我的CSS内容

在首屏内容中消除渲染阻止JavaScript和CSS

您的网页有6个阻止的CSS资源。这会导致呈现页面的延迟。

在不等待加载以下资源的情况下，无法呈现页面上的上述内容。尝试推迟或异步加载阻止资源，或直接在HTML中内联这些资源的关键部分。

因此，我正在探索async代码

上的<link>属性

<link rel="stylesheet" href="{{asset "css/bootstrap.min.css"}}">
<link rel="stylesheet" href="{{asset "css/font-awesome.min.css"}}">
<link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}">
<link rel="stylesheet" type="text/css" href="{{asset "css/highlight_styles/rainbow.css"}}">

现在，如果我在上面的async标记中添加<link>属性，我担心CSS不会按顺序加载。 css order does matter由于async无法保证订单，其他选项有哪些？

我考虑的选项：

使用defer属性可以保证订单，但<link> Tag Documentation
以cat我所有的css一起，我可以保证订单。但是我想知道是否有多种async <link>标签可以解决这个问题，因为即使使用gulp / grunt，每次都会感到很痛苦。
我可能会写一些花哨的javascript来做到这一点，但这看起来有点矫枉过正。（JS - ＆gt; CSS - ＆gt; JS可能会减少任何时间保存）。

一些参考文献：

根据webkit，defer似乎保留了订单，但async没有保留订单：

async和defer脚本都会立即开始下载而不会暂停解析器，并且都支持可选的onload处理程序来解决执行初始化的常见需求，这取决于脚本。异步和延迟之间的区别在于脚本执行时的中心。每个异步脚本在完成下载后和窗口加载事件之前的第一个机会执行。这意味着异步脚本可能（并且可能）不按页面中出现的顺序执行。另一方面，延迟脚本保证按照它们在页面中出现的顺序执行。解析完成后，但在文档的DOMContentLoaded事件之前，执行开始。

CSS订单事项：Does the order of css stylesheet definitions matter?

W3C文档：<link> Tag仅支持async，且未提及defer

Answer 1

经过进一步的研究，似乎我的一些假设是不正确的。

type="import"与type="text/css"可以是异步，但不是<head> <script src="loadCSS.min.js"></script> <script> // load a file loadCSS("Styles-V6.min.css"); </script> </head>

我能找到的最好的替代方法是使用名为link tag的库，下面是一个如何使用它的示例：

Collection

加载<link />标记异步，保证订单

1 个答案: