个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
运行后Google PageSpeed , 建议我使用 async或 defer对于我的 CSS 内容
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 6 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the 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 -> CSS -> JS 可能会减少任何节省的时间)。
一些引用资料:
根据 webkit似乎为 defer 保留了顺序但不适用于 async :
Both async and defer scripts begin to download immediately without pausing the parser and both support an optional onload handler to address the common need to perform initialization which depends on the script. The difference between async and defer centers around when the script is executed. Each async script executes at the first opportunity after it is finished downloading and before the window’s load event. This means it’s possible (and likely) that async scripts are not executed in the order in which they occur in the page. The defer scripts, on the other hand, are guaranteed to be executed in the order they occur in the page. That execution starts after parsing is completely finished, but before the document’s DOMContentLoaded event.
CSS 订单事项:Does the order of css stylesheet definitions matter?
W3C 文档: <link> Tag只支持 async没有提到defer
最佳答案
经过进一步研究，我的一些假设似乎是不正确的。
link tag with type="import" 可以是异步的，但不是 type="text/css"
我能找到的最好的替代方法是使用一个名为 loadCSS 的库，下面是一个如何使用它的例子:
<head>
<script src="loadCSS.min.js"></script>
<script>
// load a file
loadCSS("Styles-V6.min.css");
</script>
</head>
关于html - 以保证顺序加载 <link> 标签异步，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30538419/
25
4
0
我正在创建一个有效的突变，但我不确定它是否按照我认为的方式工作。但是，我想知道执行顺序是什么？ 异步 从上到下同步 同步随机顺序 其他 我想确保在执行插入/更新插入之前从表中删除某些项目。使用以下突变
如何更改规则中的前提顺序？ 例如，在伊莎贝尔的自然演绎规则中: mp: ?P ⟶ ?Q ⟹ ?P ⟹ ?Q 我们可以将顺序更改为: ?P ⟹ ?P ⟶ ?Q ⟹ ?Q 我可以用 rev_mp或者定义一
关闭。这个问题需要details or clarity .它目前不接受答案。 想改善这个问题吗？通过 editing this post 添加详细信息并澄清问题. 8年前关闭。 Improve thi
我正在使用 Hibernate 3.2，并使用标准来构建查询。我想为多对一关联添加和“排序”，但我不知道如何做到这一点。 Hibernate 查询最终看起来像这样，我猜: select t1.a, t
我正在开发一个项目，但无法让我的 javascript 按顺序工作。我知道 javascript 可以并行执行任务，因此当您向不响应的服务器发出请求时，它不会被卡住。这有它的优点和缺点。就我而言，这是
在下面的代码中，我认为f1 > f2 > f3是调用顺序，但是仅f1被调用。如何获得依次调用的3个函数？ 我已经将以下内容添加到main函数中，它可以按预期工作，但是我想知道是否还有其他确定的方法可以
我有一个如下所示的对象数组: [{ "id": 1, "Size": 90, "Maturity": 24, }, { "id": 2, "S
这是征求意见和要求的请求。我是Docker的新手。 我想要一个用于Python项目的生产和开发容器(可能也进行单元测试)。我的搜索指向多阶段Dockerfile(以及运行它们的多个docker-com
我想知道解决以下问题的有效方法是什么: 假设我在组 1 中有三个字符，在组 2 中有两个字符: group_1 = c("X", "Y", "Z") group_2 = c("A", "B") 显然，
在 Cordova 网站上，您可以看到一长串按字母顺序排列的钩子(Hook)列表，但它们触发和执行的正确顺序是什么？ 我正在尝试在构建/编译之前将 cordova.js 脚本添加到 index.htm
我想知道解决以下问题的有效方法是什么: 假设我在组 1 中有三个字符，在组 2 中有两个字符: group_1 = c("X", "Y", "Z") group_2 = c("A", "B") 显然，
这个问题已经有答案了: 奥 git _a (2 个回答) 已关闭 9 年前。 这是我的一个练习的代码， public class RockTest { public static void main(
我使用 HashMap 来存储一些数据，但每当新数据保存到 HashMap 或旧数据移出 HashMap 时，我都需要将其保持升序。但是hashmap本身不支持顺序，我可以使用什么数据结构来支持顺序？
我想创建一个序列，当星期几与函数参数中的日期相同时，它会返回所有年份的结果(例如:自开始日期起，2 月 12 日为星期日的所有年份)。 let myDate (dw:System.DayOfWeek)
我有一个包含许多元素的 Xelement。 我有以下代码来对它们进行排序: var calculation = from y in x.Elements("row")
假设我有: 在 javacript 文件中，我为类按钮和 ID 名称定义了点击操作，例如: $("#name").click(function(event){ alert("hi"); }) $
我有一个包含 2 个 subview 的 View - collectionView 和自定义 View 。我想设置一个操作在布置 2 个 View 后运行，但layoutSubViews 运行了两次
关闭。这个问题需要更多 focused .它目前不接受答案。 想改进这个问题？更新问题，使其仅关注一个问题 editing this post . 2年前关闭。 Improve this questi
我想知道 C++ 中是否有内置方法来比较两个双向迭代器的顺序。例如，我有一个 Sum 函数来计算同一列表中 2 个迭代器之间的总和: double Sum(std::list::const_itera
在 MySQL 中，这两个查询之间有区别吗？ SELECT * FROM .... ORDER BY Created,Id DESC 和 SELECT * FROM .... ORDER BY Cre
我是一名优秀的程序员,十分优秀！