Javascript js是否阻止页面呈现？

我读过关于“关键渲染路径”的文章，js显示为阻塞，但我的体验没有什么不同

关键渲染路径图

1，若我将外部javascript放在头部并重新加载页面，我会看到空白页面，直到加载并解析脚本，依此类推。（这正是图中所示）

2，若我将相同的javascript放在body元素的末尾，我会看到呈现的页面，并且脚本仍在从服务器加载

为什么在头部和身体中放置相同的外部js是不同的？关键渲染路径不相同

HTML解析器在文档中遇到

块时，将对其进行评估。当

块位于

末尾时，解析器已经构建了大部分DOM，可以开始将其呈现到屏幕上。（它可能仍在等待图像或字体，因此布局可能会更改，但可以开始。）

但是，当

位于头部时，浏览器不知道文档体中有什么，因此没有任何内容可供渲染

我想，要理解这一点，您至少需要对浏览器接收HTML页面内容时的情况有一个基本的了解。页面内容是逐元素“消化”的，这是递归完成的。容器元素的内容从上到下进行处理

在这个过程中，当一个

标记被完全看到时（也就是说，浏览器已经消耗了从开始

到结束

的部分HTML内容），然后在解析过程转移到页面内容的其余部分之前对JavaScript代码进行评估。（这里我忽略了

标记上新的可选“async”属性。）

当HTML解析器在文档中遇到

块时，将对其进行计算。当

块位于

末尾时，解析器已经构建了大部分DOM，可以开始将其呈现到屏幕上。（它可能仍在等待图像或字体，因此布局可能会更改，但可以开始。）

但是，当

位于头部时，浏览器不知道文档体中有什么，因此没有任何内容可供渲染

我想，要理解这一点，您至少需要对浏览器接收HTML页面内容时的情况有一个基本的了解。页面内容是逐元素“消化”的，这是递归完成的。容器元素的内容从上到下进行处理

---

在这个过程中，当一个

标记被完全看到时（也就是说，浏览器已经消耗了从开始

到结束

的部分HTML内容），然后在解析过程转移到页面内容的其余部分之前对JavaScript代码进行评估。（这里我忽略了

标签上新的可选“async”属性。）

由于javascript可以同时更改DOM和CSSOM，它会停止任何CRP阶段并阻塞，。。。除非是异步的

由于javascript可以同时更改DOM和CSSOM，因此它会停止任何CRP阶段并阻塞，。。。除非是异步的

此外，我还认为所有html（带js）必须在呈现之前解析为dom，并立即呈现。如果我理解脚本之前的浏览器呈现部分，请等待加载脚本运行它并呈现页面的其余部分。@user2269215是的，没错-这是一个增量过程。我认为所有html（带js）必须在呈现之前解析为dom，并立即呈现。如果我理解脚本之前的浏览器渲染部分，请等待加载脚本运行它并渲染页面的其余部分。@user2269215是的，没错-这是一个增量过程。