Question

根据我的理解，在样式表正下方的脚本标记中使用defer时，浏览器会在执行脚本并触发DOMContentLoaded之前等待样式表加载（CSSOM）。 (More about that)

这适用于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以及设置字体系列的测试类。

/* ...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可以在执行时解析，我看到“它有效！” > see Firefox

在Chrome中，CSS可以不在执行时解析，我看到“Times New Roman”> see Chrome

如果您查看开发人员工具，则在Chrome和Firefox中针对不同的方式触发了DOMContentLoaded。 Firefox在CSS文件加载结束时正好触发它（这就是测试用例工作的原因）但Chrome不会等待加载CSS文件。

Firefox developer tools

Chrome developer tools

为什么会出现这种情况，有人能解释我如何解决这个问题吗？

编辑：Chromium确认此行为是一个错误，请参阅https://bugs.chromium.org/p/chromium/issues/detail?id=792420

Chrome：DOMContentLoaded不会在延迟脚本标记中等待CSSOM吗？

0 个答案: