Javascript 解析器阻塞与渲染阻塞_Javascript_Css

Javascript 解析器阻塞与渲染阻塞

javascript css

Javascript 解析器阻塞与渲染阻塞,javascript,css,Javascript,Css,我一直在阅读Google开发者关于优化web性能的文档。我对这里使用的术语有点困惑。CSS和JavaScript文件都会阻止DOM构造。但是，CSS称为渲染块，而JavaScript称为解析器块。“解析器阻塞”和“渲染阻塞”术语有什么区别？或者它们是相同的，术语只是互换使用想象一个HTML页面有两个元素。解析器会看到第一个。它在获取并执行javascript时必须停止*解析，因为它可能包含从根本上改变后续标记解析方式的document.write（）方法调用。通过互联网获取资源相对来说要比浏览

我一直在阅读Google开发者关于优化web性能的文档。我对这里使用的术语有点困惑。CSS和JavaScript文件都会阻止DOM构造。但是，CSS称为渲染块，而JavaScript称为解析器块。“解析器阻塞”和“渲染阻塞”术语有什么区别？或者它们是相同的，术语只是互换使用

想象一个HTML页面有两个

元素。解析器会看到第一个。它在获取并执行javascript时必须停止*解析，因为它可能包含从根本上改变后续标记解析方式的

document.write（）

方法调用。通过互联网获取资源相对来说要比浏览器做的其他事情慢得多，因此它无所事事地等待。最终JS到达并执行，解析器可以继续。然后它会看到第二个

标记，并且必须经历等待再次加载资源的整个过程。这是一个连续的过程，这就是解析器阻塞

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

*解析器阻塞并不像某些现代浏览器中那样简单。他们可以暂时解析下面的HTML，希望脚本在加载和执行时不会影响后续的解析，或者即使这样，仍然需要加载相同的资源。但是如果脚本做了一些不好的事情，他们仍然需要退出工作。

CSS的渲染阻止不会阻止DOM构建，它只会阻止内容显示/渲染，直到CSSOM准备就绪。但有一个特殊情况需要注意：

如果在外部CSS的

标记下有任何内联

，，即使
只是一个空的
标记，它根本不包含JavaScript，在获取外部CSS之前，该

标记下方HTML的DOM构造仍将被阻止。如果网络连接很慢，那么空的

仍然会导致DOM构建的长时间延迟。因为

标记等待外部CSS，而DOM构造等待脚本。在这种情况下，外部CSS资源隐式地导致解析器阻塞。

还有一件事需要记住。在加载CSS之前，可以使用内联样式在屏幕上实现FP（第一次绘制）。怎样？您只需在希望首先显示的元素之后添加对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>


我将显示在屏幕上，我将是红色的
从这一点开始，每个元素（包括我）都将等待CSS首先加载，然后显示在屏幕上

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

从文档中，“JavaScript还可以阻止

DOM

构造，并在呈现页面时延迟。（

解析器阻止

）”与“CSS被视为渲染阻止资源，这意味着浏览器将保留任何已处理内容的渲染，直到构建

CSSOM

。（

render blocking

）“谢谢你的解释。这确实澄清了我的理解！还有一种称为预加载扫描（preload scanning）的方法，在这种方法中，浏览器会向前看，并发出一个请求，以获取比JS/CSS文件更多的内容。不过，浏览器可以进行的并行调用数量是有限制的。由于@ankit_m提到的上述原因，如果脚本不依赖DOM，有时甚至可以将异步添加到HTML页面上的最后一个脚本。这样，浏览器就可以预加载甚至执行优化关键渲染路径的脚本。