4

据我了解，当在位于样式表正下方的脚本标记中使用 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 文件加载。

火狐开发者工具

Chrome 开发者工具

为什么会这样，谁能解释我如何解决这个问题？

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

4

0 回答 0