1

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

根据我的理解，任何内联script都是渲染阻塞，浏览器一遇到就会执行它。它还会停止 DOM 解析。

所以，我希望我在结束时的内联脚本body应该阻止渲染，并且浏览器不应该向我显示任何东西，直到我关闭警报之后。

Chrome 似乎按照上述理解进行渲染，但 Firefox 先渲染 html，然后显示警报。

这可能是什么原因？这是否意味着 Firefox 没有考虑将 javascript 渲染阻塞？或者渲染在 Chrome 和 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 的行为会有所不同。它阻止内联脚本中的警报，但不阻止外部脚本中的警报。

更新：后续问题：在正文标记末尾呈现阻止 Javascript - 内联与外部脚本

4

2 回答 2

3

alert不是用于检查渲染行为的好工具。浏览器越来越多alert，它的近亲越来越少阻塞（不仅仅是 Firefox，Chrome 也在这样做，但尽管有很多重叠，但它们可能会做不同的事情；你可以在这里阅读 Chrome 的方法）。

显然，Firefox 允许渲染继续进行，但 Chrome 不在这种特定情况下。

要检查渲染行为，您需要使用不是 1990 年代遗留下来的阻塞。:-) 我使用的一种方法（虽然不是最近）是加载一个需要很长时间才能加载的脚本。（您可以通过使用在进程中引入人为延迟的服务器端代码发送脚本的本地服务器来做到这一点。）

于 2019-12-24T11:26:05.113 回答
1

渲染阻塞意味着“在此之后阻塞任何渲染”。

这就是将 JavaScript 放在页面底部的原因——因此它不会阻止页面上方的任何呈现。现在我们当然有async并且defer可以帮助解决这个问题，但最初我们没有。

于 2019-12-24T14:05:40.240 回答