'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.

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.

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 seems to render as per the above understanding, but Firefox first renders the html and then shows the alert.

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?

This is the code:

<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 version: 78 Firefox version: 70

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.

UPDATE: Follow up question: render-blocking Javascript at end of body tag - inline vs external script

Solution 1:^[1]

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).

So apparently, Firefox is allowing the rendering to go forward, but Chrome isn't in this specific case.

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.)

Solution 2:^[2]

Render blocking means “blocking any rendering after this”.

That’s the very reason for putting JavaScript at the bottom of the page - so it didn’t block any rendering of the page above that. Now of course we have async and defer to help with that but originally we didn’t.

Solution 3:^[3]

to debug rendering behavior - try handy tool https://slowfil.es/, instead of setting up local server that responds with the script

see DEMO:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- RENDER BLOCKING SCRIPT TAG -->
    <script src="https://slowfil.es/file?type=js&delay=2500"></script>
  </head>
  <body>
    rendered content
    <!-- RENDER NON-BLOCKING SCRIPT TAG -->
    <script src="https://slowfil.es/file?type=js&delay=2500"></script>
  </body>
</html>

<!-- THANK YOU FOR YOUR ATTENTION READING THIS, upvote my answer! -->

first paint on the timeline, performance tab chrome devtools

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Barry Pollard
Solution 3

'Render blocking Javascript at end of body tag - Firefox renders some visual content, Chrome does not

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]