深入理解javascript异步编程障眼法&&h5 web worker实现多线程

0.从一道题说起

var t = true; 
setTimeout(function(){
    t = false; }, 1000); 
while(t){ }
alert('end');

问，以上代码何时alert“end”呢？
测试一下：答案是：永远都不会alert。

解析：javascript引擎是单线程的，事件触发排队等候。所有任务按照触发时间先后排队处理。
上例中，排队的顺序状态是：

| var t=true ; | while(t){}; | alert(‘end’); |

在1000ms之后，setTimeout函数也加入队列。
while(t){ }无限循环阻塞了单线程，不管排到后面的代码执行时间有多短，后面的代码无法执行，一直阻塞下去。

1.浏览器线程

浏览器有这么几大线程：UI渲染线程（用于页面的渲染），javascript引擎线程（用于处理js），GUI事件触发线程（用于交互）。

有时会开启的线程：http传输线程，定时触发线程（定时器）

它们之间的关系是什么呢？

（1）UI渲染线程 与 javascript引擎线程 互斥

由于javascript可以操纵页面的DOM，所以如果UI渲染线程与javascript引擎线程 不互斥的话，在UI渲染线程进行页面渲染的同时，javascript引擎线程进行DOM修改，最终会造成DOM状态不一致的现象。所以，当javascript引擎线程运行的时候，UI渲染线程处于冻结状态。

（2）javascript引擎线程 与 GUI事件触发线程（用于交互） 异步

浏览器开启事件触发线程，等待用户动作，事件触发线程解析为响应事件，转移到javascript引擎线程，排队等候，等待javascript引擎的处理。

（3）javascript引擎线程 与 http传输线程 异步

网页get，post等请求，xhr异步请求都通过http传输线程，传送到javascript引擎排队，等候处理。

（4）javascript引擎线程 与 定时触发线程（定时器） 异步

setTimeout(),setInterval()由单独的线程 定时触发线程 触发，传送到javascript引擎排队等候，等待处理。

2.xhr