Is it always good to put scripts to the bottom of HTML?

Question

I was taught of using this, now there is a little problem:

<html>
    <body>
        <div id="mytext">text</div>
        <script type="text/javascript" src="my.js"></script>
        <script type="text/javascript">hideMyText();</script>
    </body>
</html>

My Js:

function hideMyText()
{
    $('#mytext').hide();
}

so I did as I was told, but the text flickers now. It is visible for a brief of moment, then disappears. How to make it run immediatly? I know I should hide it with CSS - but its possible to have a different task to do (like here, highlight a text: http://jsfiddle.net/UPs3V/291/)

have you tried putting `style="display: none"` on it? – Daniel A. White Nov 26 '17 at 21:32 — Daniel A. White, Nov 26 '17 at 21:32
@DanielA.White not enough jquery – tereško Nov 26 '17 at 21:32 — tereško, Nov 26 '17 at 21:32

score 3 · Answer 1 · answered Nov 26 '17 at 21:38

What you are seeing is sometimes referred to as a FOUC "Flash Of Unstyled Content"

This happens because of your script being at the end of the page. The browser will render what it has so far, and then pause to go fetch the script(s) from the server. But during that gap, you will see the "raw" page before any scripts run.

Now, in theory you should have a clean and presentable page just in case the JavaScript fails to load for some reason (or someone still uses NoScript...)

One way to prevent this FOUC is to put the scripts in the <head>. This may cause a slight delay in loading the page, particularly if you have big scripts, but it allows you to register an event handler for the DOMContentLoaded event, which allows you to immediately manipulate the page before the browser gets a chance to actually render it.

so afterall its allowed to put scripts to the head :) – John Smith Nov 26 '17 at 22:56 — John Smith, Nov 26 '17 at 22:56

Is it always good to put scripts to the bottom of HTML?

1 Answers1