解析器阻塞与渲染阻塞
[英]Parser blocking vs render blocking
问题描述
我一直在阅读有关优化 Web 性能的 Google Developers 文档。 我对那里使用的术语有些困惑。 CSS 和 JavaScript 文件都会阻止 DOM 构建。 但是，CSS 被称为渲染阻塞，而 JavaScript 被称为解析器阻塞。 “解析器阻塞”和“渲染阻塞”术语有什么区别？ 或者它们是否相同并且术语只是可以互换使用？
3 个解决方案
解决方案1
27 已采纳 2016-06-11 03:01:16
想象一个 HTML 页面有两个<script src="...">元素。 解析器看到第一个。 它必须在获取并执行 javascript 时停止*解析，因为它可能包含document.write()方法调用，这些调用从根本上改变了后续标记的解析方式。 通过互联网获取资源比浏览器所做的其他事情要慢得多，因此它无所事事地等待。 最终 JS 到达并执行，解析器可以继续前进。 然后它会看到第二个<script src="...">标记，并且必须经历等待资源再次加载的整个过程。 这是一个顺序过程，即解析器阻塞。
CSS 资源是不同的。 当解析器看到要加载的样式表时，它会向服务器发出请求，然后继续前进。 如果有其他资源要加载，这些都可以并行获取（受某些 HTTP 限制）。 但是只有当 CSS 资源加载并准备好时，页面才能在屏幕上绘制。 这就是渲染阻塞，并且因为获取是并行的，所以它的减速不太严重。
* 解析器阻塞不像一些现代浏览器那么简单。 他们有一些能力暂时解析以下 HTML，希望脚本在加载和执行时不会做任何事情来扰乱后续的解析，或者如果这样做，仍然需要加载相同的资源. 但是如果脚本做了一些尴尬的事情，他们仍然可能不得不退出工作。
解决方案2
3 2019-09-20 14:51:25
CSS 的渲染阻塞不会阻止 DOM 构建，它只会阻止内容的显示/渲染，直到 CSSOM 准备就绪。 但是有一个特殊情况需要注意：
如果在外部 CSS 的<link>标签下有任何内联<script> ，即使那只是一个完全不包含 JavaScript 的空<script>标签，该<script>标签下的 HTML 的 DOM 构造仍将是阻止 util 获取外部 CSS。 如果您的网络连接速度较慢，那个空的<script>仍然会导致 DOM 构建的长时间延迟。 因为<script>标签等待外部 CSS，而 DOM 构建等待脚本。 在这种情况下，外部 CSS 资源隐式地导致解析器阻塞。
解决方案3
0 2021-03-21 13:41:38
还有一件事要记住。 您可以在加载 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>
注意：我应该提到我在这里所做的被认为是不好的做法。
CSV流解析器（papaparse）是否阻止渲染？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.