在正文标签的末尾渲染阻止Javascript-Firefox渲染一些视觉内容，Chrome不渲染 [英] Render blocking Javascript at end of body tag - Firefox renders some visual content, Chrome does not
问题描述
我正在尝试一些与性能相关的优化.
I am just experimenting with a few performance related optimizations.
据我了解，任何内联script都被渲染阻止，浏览器会在遇到后立即执行它.它还会停止DOM解析.
As per my understanding, any inline script is render blocking and the browser executes it as soon as it is encountered. It also halts the DOM parsing.
因此，我希望在body结尾的内嵌脚本应该阻止渲染，并且在我解除警报之前，浏览器根本不向我显示任何内容.
So, I am expecting that the inline script I have at the end of the body should block rendering and the browser should not show me anything at all until after I dismiss the alert.
Chrome似乎按照上述理解进行渲染，但是Firefox首先渲染html，然后显示警告.
Chrome seems to render as per the above understanding, but Firefox first renders the html and then shows the alert.
这可能是什么原因?这是否意味着Firefox不考虑将javascript渲染阻止?还是渲染在Chrome和Firefox中有其他含义? Firefox是否通过了解脚本接近body末尾的事实进行了优化?
What can be the reason of this? Does it mean Firefox is not considering the javascript to be render blocking? or does render mean something else in Chrome vs Firefox? Is Firefox somehow optimizing by understanding the fact that the script is towards the end of 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 version: 78 Firefox version: 70
另一个观察结果，如果警报是内联脚本还是外部脚本，则chrome的行为会有所不同.它会阻止内联脚本中的警报，但不会阻止外部脚本中的警报.
Another observation, chrome behaves differently if the alert is in inline script vs external script. It blocks for alerts in inline script, but does not block for alert in external script.
更新:跟进问题: render-在正文标签末尾阻止Javascript-内联还是外部脚本
推荐答案
alert并不是用来检查渲染行为的好工具.浏览器越来越使alert及其表亲受到更少的阻止(不仅是Firefox，Chrome也在这样做)，尽管有很多重叠之处，但它们可能在做不同的事情；您可以阅读有关Chrome的方法
alert isn't a good tool to use to check for rendering behavior. Browsers are increasingly making alert and its cousins less blocking (not just Firefox, Chrome's doing it too, but despite a lot of overlap they may be doing different things; you can read about Chrome's approach here).
因此，显然，Firefox允许继续进行渲染，但是在这种特定情况下，Chrome浏览器就不允许.
So apparently, Firefox is allowing the rendering to go forward, but Chrome isn't in this specific case.
要检查渲染行为，您需要使用一些从1990年代开始就没有过时的保留功能. :-)我使用过的一种方法(尽管不是最近)是加载需要很长时间才能加载的脚本. (您可以通过在本地服务器上使用服务器端代码发送脚本来实现此目的，这会在过程中引入人为的延迟.)
To check rendering behavior, you need to use something blocking that isn't an archaic holdover from the 1990's. :-) One way I've used (though not lately) is to load a script that takes a long time to load. (You can do that by having a local server that sends the script using server-side code that introduces an artificial delay in the process.)
这篇关于在正文标签的末尾渲染阻止Javascript-Firefox渲染一些视觉内容，Chrome不渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
