根据我的理解，当在位于样式表正下方的脚本标签中使用 defer 时，浏览器会在执行脚本并触发 DOMContentLoaded 之前等待样式表加载 (CSSOM)。（更多相关内容）
这在 Firefox 中有效，但在 Chrome 中无效，因此我做了一个测试用例，其中在延迟的脚本标记之前加载了一个巨大的 css 文件。
带有样式表和延迟脚本的 HTML 文件。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<script src="main.js" defer></script>
</head>
<body>
<div class="result">Loading...</div>
</body>
</html>
CSS 文件包含引导程序和设置字体系列的测试类。
/* ...bootstrap v4 css... */
.test {
font-family: 'It works!';
}
JS 文件包含 jQuery 和一个简单的测试脚本。
// ...jQuery....
$(function () {
$('<meta class="test">').appendTo(document.head);
var extractedStyles = $('.test').css('font-family');
$('.result').text(extractedStyles);
});
在 Firefox 中，CSS 可以在执行时解析，我看到“它有效！” > 参见火狐浏览器
在 Chrome 中，CSS 无法在执行时解析，我看到“Times New Roman” > 请参阅 Chrome …
