Question

我一直在阅读有关优化网络效果的Google Developers文档。我对那里使用的术语有点困惑。 CSS和JavaScript文件都阻止了DOM构造。但是，CSS称为渲染阻塞，而JavaScript称为解析器阻塞。＆＃39;解析器阻塞＆＃39;有什么区别？并且＆＃39;渲染阻止＆＃39;条款？或者它们是否相同，术语可以互换使用？

Answer 1

想象一下，HTML页面有两个<script src="...">个元素。解析器看到第一个。它必须在获取时停止*解析然后执行javascript，因为它可能包含document.write()方法调用，从根本上改变了后续标记的解析方式。通过互联网获取资源比浏览器所做的其他事情要慢得多，所以它无所事事地等待着。最终JS到达，执行并且解析器可以继续。然后它会看到第二个<script src="...">标记，并且必须经历等待资源再次加载的整个过程。这是一个顺序过程，而且是解析器阻塞。

CSS资源不同。当解析器看到要加载的样式表时，它会向服务器发出请求，然后继续。如果要加载其他资源，则可以并行获取这些资源（受某些HTTP限制）。但只有当CSS资源被加载并准备就绪时，才能在屏幕上绘制页面。那是渲染阻塞，并且因为提取是并行的，所以减速不太严重。

<小时/> *解析器阻塞并不像某些现代浏览器那样简单。他们有一些能够暂时解析下面的HTML，希望脚本在加载和执行时不会做任何事情来搞乱随后的解析，或者如果是，那么仍然需要加载相同的资源。但如果脚本做得不好，他们仍然可以退出工作。

Answer 2

CSS的呈现阻止功能不会阻止DOM的构建，它只会阻止内容的显示/呈现，直到CSSOM准备就绪为止。但是要注意一个特殊情况：

如果外部CSS的<script>标签下有任何内联<link>，即使该内容为 只是一个空的<script>标记，根本不包含任何JavaScript ，<script>标记之下的HTML的DOM构造将仍然被外部CSS阻止。如果您的网络连接速度很慢，那么空的<script>仍然会导致DOM构建的长时间延迟。因为<script>标签等待外部CSS，而DOM构建等待脚本。在这种情况下，外部CSS资源会隐式导致解析器阻塞。

Answer 3

还有一点要记住。您可以在加载 CSS 之前使用内联样式在屏幕上实现 FP(First Paint)。如何？您只需在要首先显示的元素之后添加对 CSS 的引用。例如：

<html>
<body>
<h1 style="color:red"> I will be displayed on the screen and I will be RED</h1>
<link rel="stylesheet" href="styles.css">
<h2> Every elementfrom this point forward (including me) will wait for the CSS to load first and then be displayed on the screen</h2>
</body>
</html>

注意：我应该提到我在这里所做的被认为是不好的做法。

解析器阻塞vs渲染阻塞

3 个答案: