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

现在，让我们进一步假设浏览器已经下载了reset.css和style.css，但autocomplete.css仍处于待处理状态。我想知道如果浏览器会遇到页面末尾的阻止脚本标记会发生什么？显然，它可以将HTML呈现给脚本标记，但是缺少autocomplete.css阻止了脚本的执行？

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

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

并且它表示在CSSOM存在之前就会阻止执行JavaScript。

现在： 1.页面是否开始呈现甚至autocomplete.css尚未到达？和， 2.在script.js存在之前，autocomplete.css javascript的执行是否被阻止？

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

Answer 1

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

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

加载＆amp;解析即可。如果它超过2k行代码，那么在使用适当的工具进行测量时，您会注意到它。如果它超过10k行代码，您将能够在不使用任何工具的情况下注意到它。如果它包含有关元素之上的元素的规则，则无论如何。
无法加载/解析（由于网络问题或规则无效） - 如果在加载/解析CSS时返回错误，则会更快地解析并产生结果差异将难以察觉。如果服务器没有返回错误（并且没有响应） - 那将阻止你的CSSOM构建，你的页面加载和脚本的执行。

资源：

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

Answer 2

最新的性能建议如下：

1）将所有css内联到浏览器需要呈现在页面内容之上的标题中。无需滚动即可看到的内容。

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

Answer 3

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

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

了解渲染阻止CSS

3 个答案: