理解阻塞渲染的CSS

Question

理解阻塞渲染的CSS

6

我正在尝试理解CSS在特定环境中的评估方式：

假设我在标签中有以下内容：

<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 只包含稍后由某些 JavaScript 使用的类。

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

请注意，脚本标记不是同步的。

我已经阅读了： https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp 在那里，它说 JavaScript 的执行被阻止，直到 CSSOM 准备好。

现在： 1. 即使尚未到达autocomplete.css，页面是否会开始呈现？ 2. script.js的执行是否被阻塞，直到autocomplete.css到位？

请注意，我指的是两件不同的事情：呈现和脚本执行。

- worenga

请阅读这篇文章。小建议：**消除渲染阻塞的CSS** - Abdulla Nilam

3

如果缺少 autocomplete.css 文件，则页面将会抛出一个静默错误：Failed to load resource: net::ERR_FILE_NOT_FOUND。但是，所有内容都将继续加载，包括您的脚本。如果文件存在但加载需要时间，则由于您的 CSS 在头部并且必须在页面的其余内容加载之前加载，因此您的页面将无法加载。 - Paulo Pereira

3个回答

2

最新的性能建议如下：

1）将浏览器需要渲染“above-the-fold”（即可不用滚动就能看到的内容）的CSS样式表内联到头部。

2）将所有其他CSS样式表添加到页面底部，或使用类似于https://github.com/filamentgroup/loadCSS这样的方式异步加载它们。

- Sascha Grindau

1

自动完成是一个CSS文件。因此，它只向在HTML中定义的类添加样式属性。即使缺少CSS，JavaScript仍将正确执行。

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

- L L

浏览器不需要等待/js/script.js的执行，直到autocomplete.css已经到达吗？ - worenga

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tao · Accepted Answer

所有的CSS都会阻塞渲染。唯一的例外是你的DOM尚未知晓的CSS（异步加载，通过javascript实时构建/加载）。

在浏览器构建CSS对象模型之前（或认为已经构建），页面不会渲染，javascript也不会执行。然而，resolve并不一定意味着load。它可能有两种含义：

加载和解析。如果代码行数超过2k，使用适当的工具进行测量时，您将会注意到它。如果代码行数超过10k，即使不使用任何工具，您也能够注意到它。这与其是否包含关于以上折叠元素的规则无关。
无法加载/解析（由于网络问题或无效规则）-如果在加载/解析CSS时返回错误，则会更快地解决，并且产生的差异几乎不可见。如果服务器没有返回错误（只是没有响应）-那将阻止您的CSSOM构建，您的页面加载以及您的脚本执行。

资源：

W3C的CSSOM规范。
MDN的CSSOM资源页面
CSSOM是什么？