title: HTML/javascript: prevent paint before code executes
body: <p>I have a page with a javascript file at the end. the file is placed at the end so that I get access to all the dom elements.
  let us say the markup looks like this</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
  //lot of markup here
  &lt;script src="my-js.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  </code></pre>
  
  <p>the sample markup is just to show the location of my js file.</p>
  
  <p>the first like in the js file (my-js.js) is </p>
  
  <pre><code>document.body.style.visibility = 'hidden';
  </code></pre>
  
  <p>After the code runs I set the visibility back to hidden</p>
  
  <p>From what I have understood(from a lot of articles related to this including in stackoverflow ones) is that the browser reaches the js, then executes it, and then continues with render and then paints.
  If that was true, my code as described should work fine.</p>
  
  <p>However, what is happening now is that, the page is shown  (for less than 500ms) as it is before the code executed, then quickly hidden and then shown again after the code executed.</p>
  
  <p>in short, what I want is:
  page is hidden > code executes > page is shown
  instead what I get is
  page is shown > page is hidden > code executes > page is shown</p>
  
  <p>My question is why is the page shown for that split second? what am I doing wrong here?</p>
  
  <p>PS: Please note that I cannot change the location of the js nor add another. So, do not post any solution that suggest the same. 
  More importantly, I want to know why my code is wrong.</p>