title: What are the order of Javascript event loop stack and loading external CSS?
body: <p>Assume that I having the code as below:</p>
  
  <p>index.css</p>
  
  <pre><code>#box {
    width: 1000px;
  }
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;head&gt;
  &lt;script src="jquery.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;div id="main"&gt;
  &lt;div id="box"&gt;Box&lt;/div&gt;
  &lt;link rel="stylesheet" href="index.css"&gt;
  &lt;script src="index.js"&gt;&lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>setTimeout(function(){
    console.log($('#box').width())
  }, 500)
  </code></pre>
  
  <p>What is the output of console.log if:</p>
  
  <pre><code>CSS is arrived after 500ms(.i.e server slow): 1000 or other? (I think it should be 1000)
  CSS is arrived before 500ms: 1000 or other?
  </code></pre>
  
  <p>And more general question:</p>
  
  <pre><code>Can the applying of external CSS be happened when event loop of JS is not empty?
  </code></pre>