title: Browser used cache without revalidate
body: <p>I am trying to learning the browser's (Chrome/Firefox) cache mechanism.
  I set up a simple HTML:</p>
  
  <pre><code>    &lt;HTML&gt;&lt;BODY&gt;
      Hellow World
  
      &lt;script&gt;
          function loadJS(){ 
             var s = document.createElement('script'); 
             s.setAttribute('src','/myscript');
             document.body.appendChild(s);
          } 
          loadJS()
      &lt;/script&gt;
  
      &lt;BODY&gt;&lt;/HTML&gt;
  </code></pre>
  
  <p>I output "<code>Cache-Control: max-age:30</code>" for "/myscript"</p>
  
  <p>Everytime I press F5, browser will re-validate /myscript with my server to get a 304 back.</p>
  
  <p>But if I use </p>
  
  <pre><code>setTimeout(loadJS, 1);
  </code></pre>
  
  <p>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.</p>
  
  <p>My question is:</p>
  
  <ol>
  <li>Why? is there a detail explanation for this?</li>
  <li>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?</li>
  </ol>