了解渲染阻止CSS

Question

了解渲染阻止CSS

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

Run Code Online (Sandbox Code Playgroud)

现在，让我们假设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那里？

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

Answer 1

And*_*hiu 5

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

除非您的浏览器无法CSS通过构建CSS对象模型来解决所有问题（或认为解决了问题），否则该页面将不会呈现，javascript也不会执行。但是，resolve并不一定意味着load。这可能意味着两件事：

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

资源：

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

归档时间：	8 年，8 月前
查看次数：	523 次
最近记录：	8 年，8 月前