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

Question

I am just experimenting with a few performance related optimizations.

As per my understanding, any inline script is render blocking and the browser executes

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

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