了解渲染封锁CSS

我想了解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>

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

还有它说，JavaScript的执行被阻塞，直到CSSOM是存在的。

现在： 1.即使autocomplete.css尚未到达，页面是否会开始渲染？和 2.是否执行script.js JavaScript直到autocomplete.css在那里？

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

来源

2017-03-03 worenga

阅读本。只是一个提示** [消除渲染阻塞CSS]（https://varvy.com/pagespeed/render-blocking-css.html）** –

如果缺少'autocomplete.css'，那么页面将会抛出一个无声的错误： **无法加载资源：net :: ERR_FILE_NOT_FOUND **。但一切都会继续加载，包括你的脚本。如果文件存在并且需要花费时间加载，那么您的页面将无法加载，因为您的css在头部，并且在加载页面的其余部分之前必须加载它。 –

所有CSS呈现阻塞。这条规则唯一的例外是CSS，您的DOM还不知道（加载异步，通过javascript即时建立/加载）。

直到您的浏览器没有通过构建CSS对象模型解决（或认为它解决了）所有CSS，页面将不会呈现并且javascript将不会执行。但是，resolve并不一定意味着load。它有两个含义：

负载&解析。如果它超过了2k行代码，那么使用适当的工具进行测量时就会注意到它。如果它超过10k行代码，则无需使用任何工具即可注意到它。不管它是否包含与折叠之上的元素有关的规则，都是如此。
无法加载/解析（由于网络问题或无效规则） - 如果在加载/解析CSS时返回错误，它将解析得更快，所得差异将不易察觉。如果服务器没有返回错误（并且只是没有响应） - 这会阻止你的CSSOM的构建，你的页面从加载和你的脚本执行。

资源：

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

来源

2017-03-03 14:34:00

好的很清楚： '/ js/script.js'的执行会被阻止，但渲染不会？ – worenga

这就是我的问题的核心：读取https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp它是在js的执行被阻止直到cssom被构造（注意脚本不是异步的）。那么即使你的脚本被阻止了'autocomplete.css'不包含适用于html内容的规则？我现在明白，即使某些CSS不在那里，渲染也可能发生？ – worenga

@worega我已经根据我能找到的主题更新了我的答案。它看起来像'javascript'执行延迟到'CSSOM'构建。 –

autocomplete是一个css文件。因此，它只为HTML中定义的类添加样式属性。即使css丢失，javascript仍然可以正确执行。

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

来源

2017-03-03 14:29:08

在autocomplete.css到达之前，浏览器是否需要等待执行'/ js/script.js'？ – worenga

最新性能的建议如下：

1）行内所有的CSS到浏览器需要呈现上述的倍含量的头。无需滚动即可看到的内容。

2）添加其他所有的CSS页面的底部或更好的东西异步加载这样的：https://github.com/filamentgroup/loadCSS

来源

2017-03-27 09:40:06

了解渲染封锁CSS

回答

相关问题