Browser used cache without revalidate

I am trying to learning the browser's (Chrome/Firefox) cache mechanism. I set up a simple HTML:

    <HTML><BODY>
    Hellow World

    <script>
        function loadJS(){ 
           var s = document.createElement('script'); 
           s.setAttribute('src','/myscript');
           document.body.appendChild(s);
        } 
        loadJS()
    </script>

    <BODY></HTML>

I output "Cache-Control: max-age:30" for "/myscript"

Everytime I press F5, browser will re-validate /myscript with my server to get a 304 back.

But if I use

setTimeout(loadJS, 1);

Everytime I press F5, it looks like browser will check expire time, and if not expired, browser will use the cache directly instead of going to server for revalidation.

My question is:

1. Why? is there a detail explanation for this?
2. Does it mean if I want browser to use cache and reduce network request as much as possible, I need to wait the page loaded, and then request resources by js later?