了解渲染阻塞 CSS

Question

我正在尝试了解 CSS 在特定设置中的评估方式：

假设我的 <head> 标签中包含以下内容：

<html><head>
...
    <link href="reset.css" type="text/css" rel="stylesheet">
    <link href="style.css" type="text/css" rel="stylesheet">
    <link href="autocomplete.css" type="text/css" rel="stylesheet">
</head>
<body>
... html ...
<script type="text/javascript" src="/js/script.js"></script>
</body></html>

现在，我们假设 reset.css 和 style.css 包含一些规则，这些规则会立即影响上面的内容或 HTML 中的元素。然而，autocomplete.css 仅包含 class 被一些 JavaScript 稍后使用的使用。

现在，让我们进一步假设浏览器已经下载 reset.css 和 style.css 但 autocomplete.css 仍在等待中。我想知道如果浏览器在页面末尾遇到阻塞脚本标记会发生什么情况？很明显，它可以渲染 HTML 到 script 标签，但是脚本的执行是否被缺少的 autocomplete.css 阻止了？

注意脚本标签不是同步的。

我读过： https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp

那里说 JavaScript 的执行被阻止，直到 CSSOM 出现。

现在： 1.autocomplete.css还没到页面会开始渲染吗？和， 2. script.js javascript 的执行是否被阻塞直到 autocomplete.css 出现？

注意，我指的是两个不同的东西：渲染和脚本执行。

Answer 1

自动完成是一个 css 文件。因此，它只将样式属性添加到 html 中定义的类。 javascript 仍然会正确执行，即使缺少 css。

唯一可能发生的事情是，如果 js 更改类的某些 css 样式，该样式在 autocomplete.css 中定义。然而即使那样也不太可能。

Answer 2

所有 CSS 都是渲染阻塞。此规则的唯一例外是 CSS，您的 DOM 还不知道（异步加载，built/loaded 通过 javascript 动态加载）。

直到您的浏览器没有通过构建 CSS 对象模型解决（或认为它解决）所有 CSS，页面将不会呈现并且 javascript 不会执行。但是，resolve 并不一定意味着 load。它可能意味着两件事：

加载和解析。如果它超过 2k 行代码，您会在使用适当的工具进行测量时注意到它。如果它超过 10k 行代码，您将能够在不使用任何工具的情况下注意到它。这与它是否包含有关首屏元素的规则无关。
无法 load/parse（由于网络问题或无效规则）- 如果在 CSS 时 returned 出现错误是 loaded/parsed，它会更快地解析并且产生的差异几乎不会被注意到。如果服务器没有 return 错误（只是没有响应）- 这将阻止您的 CSSOM 构建、页面加载和脚本执行。

资源：

W3C 的 CSSOM 规范
MDN 的 CSSOM 资源页面
What is CSSOM?

Answer 3

最新性能推荐如下：

1) 将所有css内联到浏览器需要渲染above-the-fold-content的header中。无需滚动即可看到的内容。

2) 将所有其他 css 添加到页面底部或更好地异步加载它，如下所示：https://github.com/filamentgroup/loadCSS

了解渲染阻塞 CSS

Understanding Render Blocking CSS

html

css

web-performance