Question

我正在尝试一些与性能相关的优化。

根据我的理解，任何内联script都被渲染阻止，浏览器会在遇到后立即执行它。它还会停止DOM解析。

因此，我希望body末尾处的内嵌脚本应阻止呈现，并且浏览器在我解除警报之前不会向我显示任何内容。

根据上述理解，Chrome似乎可以呈现，但是Firefox首先呈现html，然后显示警报。

这可能是什么原因？这是否意味着Firefox不考虑将javascript渲染阻止？还是渲染在Chrome vs Firefox中意味着其他东西？ Firefox是否通过理解脚本即将到body的末尾而在某种程度上进行了优化？

这是代码：

<html>
  <head></head>
  <body>
    <div>Some Content</div>
    <div>Some Content</div>
    <div>Some Content</div>
    <div>Some Content</div>
    <div>Some Content</div>
    <div>Some Content</div>
    <div>Some Content</div>
    <div>Some Content</div>
    <div>Some Content</div>
    <div>Some Content</div>
    <div>Some Content</div>
    <div>Some Content</div>
    <div>Some Content</div>
    <script>
      alert('here');
    </script>
  </body>
</html>

Chrome版本：78 Firefox版本：70

另一个观察结果，如果警报是内联脚本还是外部脚本，则chrome的行为会有所不同。它会阻止内联脚本中的警报，但不会阻止外部脚本中的警报。

更新：后续问题：render-blocking Javascript at end of body tag - inline vs external script

Answer 1

alert并不是用来检查渲染行为的好工具。浏览器使alert及其表亲的阻塞越来越少（不仅Firefox，Chrome也这样做），尽管存在很多重叠之处，但它们可能在做不同的事情；您可以了解Chrome的方法here。

因此，很明显，Firefox允许继续进行渲染，但在这种特定情况下，Chrome浏览器就不允许。

要检查渲染行为，您需要使用一些从1990年代开始就没有过时的保留功能。 :-)我使用过的一种方法（尽管不是最近）是加载需要很长时间才能加载的脚本。（您可以通过在本地服务器上使用服务器端代码发送脚本来完成此操作，从而在过程中引入人为延迟。）

Answer 2

渲染阻止是指“在此之后之后阻止任何渲染”。

这就是将JavaScript放在页面底部的原因-因此它不会阻止页面上方的任何呈现。当然，现在我们有async和defer可以提供帮助，但最初我们没有。

在body标签的结尾渲染阻止Javascript-Firefox渲染一些视觉内容，Chrome不渲染

2 个答案: