我读到了“关键渲染路径”，并且 js 显示为阻塞，但我的体验略有不同。
关键渲染路径图 http://i59.tinypic.com/29qnq88.jpg
1，如果我将外部 JavaScript 放在头部并重新加载页面，我会看到空白页面，直到脚本加载解析等等。 (这正是图片中的内容)
2，如果我在 body 元素末尾放置相同的 JavaScript，我会看到渲染的页面和脚本仍在从服务器加载。
为什么在 head 和 body 中放置相同的外部 js 是不同的？关键渲染路径不一样？
最佳答案
<script>当 HTML 解析器在文档中遇到 block 时，就会对 block 进行评估。当 <script> block 位于 <body> 的末尾，解析器已经构建了大部分 DOM，并且可以开始将其渲染到屏幕上。 (它可能仍在等待图像或字体，因此布局可能会改变，但它可以开始。)
当 <script>位于头部，但是，浏览器不知道文档正文中的内容，因此没有任何内容可渲染。
我想，要理解这一点，您至少需要对浏览器接收 HTML 页面内容时发生的情况有一个基本的了解。页面内容被逐个元素地“消化”，并且这是递归完成的。容器元素的内容是从上到下处理的。
在此过程中，当 <script>标签被完全看到(也就是说，浏览器已经消耗了从开始 <script> 到结束 </script> 的 HTML 内容部分)，然后在解析过程继续之前评估 JavaScript 代码到页面的其余内容。 (我在这里忽略 <script> 标签上新的可选“async”属性。)
关于javascript - js 是否会阻塞页面渲染？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25229841/