解析器阻塞vs渲染阻塞 [英] Parser blocking vs render blocking
问题描述
我一直在阅读有关优化网络效果的Google Developers文档。我对那里使用的术语有点困惑。 CSS和JavaScript文件都阻止了DOM构造。但是，CSS称为渲染阻塞，而JavaScript称为解析器阻塞。 '解析器阻塞'和'渲染阻塞'术语有什么区别？或者它们是否相同，术语可以互换使用？
I've been reading Google Developers documentation on optimizing web performance. I'm a little confused with the terminology used there. Both CSS and JavaScript files block DOM construction. But, CSS is called render-blocking whereas JavaScript is called parser-blocking. What is the difference in the 'parser-blocking' and 'render-blocking' terms? Or are they the same and the terminology is just interchangeably used?
推荐答案
想象一下，HTML页面有两个< script src =...> 元素。解析器看到第一个。它必须在获取时停止*解析然后执行javascript，因为它可能包含 document.write（）方法调用，从根本上改变了后续标记的解析方式。通过互联网获取资源比浏览器所做的其他事情要慢得多，所以它无所事事地等待着。最终JS到达，执行并且解析器可以继续。然后它会看到第二个< script src =...> 标记，并且必须经历等待资源再次加载的整个过程。这是一个顺序过程，而且是解析器阻塞。
Imagine an HTML page has two <script src="..."> elements. The parser sees the first one. It has to stop* parsing while it fetches and then executes the javascript, because it might contain document.write() method calls that fundamentally change how the subsequent markup is to be parsed. Fetching resources over the internet is comparatively much slower than the other things the browser does, so it sits waiting with nothing to do. Eventually the JS arrive, executes and the parser can move on. It then sees the second <script src="..."> tag and has to go through the whole process of waiting for the resource to load again. It's a sequential process, and that's parser blocking.
CSS资源不同。当解析器看到要加载的样式表时，它会向服务器发出请求，然后继续。如果要加载其他资源，则可以并行获取这些资源（受某些HTTP限制）。但只有当CSS资源被加载并准备就绪时，才能在屏幕上绘制页面。那是渲染阻塞，并且因为提取是并行的，所以减速不太严重。
CSS resources are different. When the parser sees a stylesheet to load, it issues the request to the server, and moves on. If there are other resources to load, these can all be fetched in parallel (subject to some HTTP restrictions). But only when the CSS resources are loaded and ready can the page be painted on the screen. That's render blocking, and because the fetches are in parallel, it's a less serious slow down.
*解析器阻塞不是那么简单在一些现代浏览器中。他们有一些能够暂时解析下面的HTML，希望脚本在加载和执行时不会做任何事情来搞乱随后的解析，或者如果是，那么仍然需要加载相同的资源。但是如果脚本做得很尴尬，他们仍然可以退出工作。
* Parser blocking is not quite as simple as that in some modern browsers. They have some ability to tentatively parse the following HTML in the hope that the script, when it loads and executes, doesn't do anything to mess up the subsequent parsing, or if it does, that the same resources are still required to be loaded. But they can still have to back out the work if the script does something awkward.
这篇关于解析器阻塞vs渲染阻塞的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
