了解渲染阻塞 CSS答案

【问题标题】：Understanding Render Blocking CSS了解渲染阻塞 CSS
【发布时间】：2017-07-23 16:43:57
【问题描述】：

我正在尝试了解如何在特定设置中评估 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 渲染到 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 存在？

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

【问题讨论】：

阅读本文。只是一个提示Eliminate render blocking css
如果autocomplete.css 缺失，则页面将抛出静默错误：加载资源失败：net::ERR_FILE_NOT_FOUND。但是一切都会继续加载，包括你的脚本。如果文件存在并且加载需要时间，那么您的页面将不会加载，因为您的 css 在头部，并且必须在加载页面的其余部分之前加载它。

标签： html css web-performance

【解决方案1】：

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

唯一可能发生的情况是，如果 js 更改了 autocomplete.css 中定义的类的一些 css 样式。但是即使那样也不太可能。

【讨论】：

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

【解决方案2】：

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

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

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

资源：

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

【讨论】：

好吧，明确一点：/js/script.js 的执行将被阻止但渲染不会？
这就是我问题的核心：阅读developers.google.com/web/fundamentals/performance/… 表示js 的执行被阻塞，直到构建cssom（注意脚本不是异步的）。那么即使 autocomplete.css 不包含适用于 html 内容的规则，脚本也会被阻止吗？我现在明白即使没有一些 css 也可以进行渲染？
@worega 我已经根据我能找到的关于这个主题的内容更新了我的答案。看起来javascript 的执行被延迟到CSSOM 构建完成。

【解决方案3】：

最新的性能建议如下：

1) 将所有 css 内联到浏览器需要在折叠内容上方呈现的标题中。无需滚动即可看到的内容。

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

【讨论】：