6

我试图了解如何在特定设置中评估 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 在那里。

autocomplete.css现在： 1. 页面还没到就开始渲染吗？并且， 2. script.jsjavascript 的执行是否被阻止直到autocomplete.css存在？

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

4

3 回答 3

5

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

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

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

资源：

于 2017-03-03T14:34:00.383 回答
2

最新的性能建议如下：

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

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

于 2017-03-27T09:40:06.273 回答
1

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

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

于 2017-03-03T14:29:08.707 回答