JavaScript单线程/浏览器事件驱动

首先看一个例子：

function foo() {
  console.log('first');
  setTimeout((function(){
    console.log('second');
  }),5);
}
for(var i =0;i<10000;i++) {
  foo();
}

结果是先输出10000个first然后立即输出10000个second。

因为JavaScript是单线程运行的，特定的时间只能有特定的代码正在执行，不会有多段代码同时执行。

setTimeout一般文档中的描述是一段时间后执行某段代码或者方法，但是严格说来不是的，应该是一段时间后把某段代码或者方法放入执行队列中，至于什么时候能执行它们就只能等JavaScript引擎按照队列一个一个进行。

上面的例子，setTimeout中的方法只能等待for循环结束后才执行，因为for循环在执行队列中靠前。

但是浏览器却不是单线程的，一个浏览器可能有以下进程：javascript引擎线程、界面渲染线程、浏览器事件触发线程、Http请求线程。而且浏览器依靠事件驱动机制来确定代码的执行队列。

所以就不难理解为什么AJAX是异步操作的了。

由于JavaScript是单线程的，所以尽管浏览器可以并行下载js文件，但是也必须依次顺序下载。

实现非阻塞的js文件下载有两种方法：

1. HTML5的defer和async。

<script type="text/javascript" defer src="foo.js"></script>
<script type="text/javascript" async src="foo.js"></script>

2. 动态加载js文件

var script=document.createElement('script');
script.setAttribute("type","text/javascript");
script.setAttribute("src","xxx.js");
document.documentElement.appendChild(script);
//or: document.getElementsByTagName('head')[0].appendChild(script);
//or: document.body.appendChild(script);