title: Does splitting scripts/css produce a faster execution/paint time
body: <p>I know that when a browser downloads a remote script it waits until the entire file has finishes downloading before executing it(obviously).
  Splitting the file into multiple remote files would increase load time but it would also allow some important code to be executed a lot sooner.</p>
  <p>Does the Load/execution work the same for inline script?
  Assuming it does then splitting inline scripts would have such a small increase in over all load time it wouldn't be noticeable and it would allow some code to execute faster results.(win win)</p>
  <h2>Example</h2>
  <pre><code>&lt;script&gt;
      /* 
          Critical JS Block (Any Initial visual Dom Manipulation or loading critical assets)
      */
       function loadCSS(){};  //https://github.com/filamentgroup/loadCSS
       document.getElementbyId('textbox1').value(localStorage.textbox1);
  &lt;/script&gt;
  &lt;script&gt;
       /* 
         Non Critical JS Block
          ui event listeners
          buttons, menus, tabs, etc
      */
  &lt;/script&gt;
  
  &lt;script&gt;
      /* 
          lazy loading / pre-loading assets 
      */
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  <p>Does this work for inline <code>&lt;scripts&gt;</code> and for inline <code>&lt;style&gt;</code> ?</p>
  <pre><code>&lt;style&gt;
      body{display:none;}
      /* 
          Critical CSS Block
      */ 
      body{display:block;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  ...
  &lt;style&gt;
  
      /* 
          Non Critical CSS Block
      */ 
  
  &lt;/style&gt;
  &lt;/body&gt;
  </code></pre>
  <p>If this does work and it is a practical solution which blocks would be better as inline and which external scripts ?</p>