mic*_*orm 5 javascript google-chrome deferred cssom domcontentloaded
根据我的理解，当在位于样式表正下方的脚本标签中使用 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
如果您检查开发人员工具，就会发现 DOMContentLoaded 在 Chrome 和 Firefox 中的触发方式有所不同。Firefox 在 CSS 文件加载结束时立即触发它（这就是测试用例工作的原因），但 Chrome 不会等待 CSS 文件加载。
为什么会出现这种情况？任何人都可以解释我如何解决这个问题吗？
编辑：Chromium 确认此行为是一个错误，请参阅https://bugs.chromium.org/p/chromium/issues/detail?id=792420
| 归档时间： |
|
| 查看次数： |
533 次 |
| 最近记录： |
