如何理解JS单线程？
JS是单线程的，也就是说同一时间只能做一件事，看下边
console.log(1)
setTimeout(() => {
console.log(2)
}, 0);
console.log(3)
// 执行结果
1，3，2
单线程优先执行同步任务，同步任务执行完才去执行异步任务，在执行同步任务的过程中遇到异步任务会挂起，继续执行同步任务。
- 单线程：只有一个线程，代码顺序执行，容易出现代码阻塞（页面假死）。
- 多线程：有多个线程，线程间独立运行，能有效地避免代码阻塞，并且提高程序的运行性能
可以看到多线程其实是比较占优势，事实上，大多数语言采用的也是多线程运行。那竟然如此，为何JavaScript却选择了单线程的方式运行呢？
这就跟js的用途有关了，因为在浏览器中，js主要是用于页面交互以及操作页面的DOM元素的。如果有两个线程，一个线程要求删除DOM元素，另一个线程却要修改DOM元素的样式，那浏览器就无法确定应该听哪个线程的。虽然聪明的小伙伴可能知道可以加个”锁“，但是这就会提高了复杂度，要知道，js可是用了十天就设计出来了呀，不可能搞得这么复杂滴。所以从诞生以来，js就一直是单线程执行的
浏览器线程
既然js是单线程执行的，那各种http请求和事件触发以及逻辑运行怎么可能执行的过来？其实不要混淆了，js线程一般只负责js的解析和执行。而上面说的请求和事件触发这些都是由浏览器处理的，而浏览器却是多线程的。一般的浏览器有以下几个线程：
- 事件触发线程：处理常见的DOM操作
- 定时器线程：处理定时器任务，比如
setTimeOut,setInterval - http请求线程：处理http请求。
- 渲染引擎线程：负责页面的渲染，当页面发生重绘和回流时会执行该线程
- js引擎线程：负责js的解析和逻辑执行。
我们所说的“js是单线程”指的就是浏览器一般只开一个js引擎线程来执行js。而在执行过程中遇到定时器或者http请求等，会丢给上面相对应的线程执行，而js则继续运行自己代码，这样就不会阻塞了，等到http请求或定时器等返回回调函数的时候且js引擎没有任务时（具体见下文），js再执行这个回调函数，
这就是异步和回调。
HTML5 Web Worker
当然js执行过程中不可避免也有比如复杂运算或多重循环等耗时操作，针对这个问题HTML5提出了Web Worker，它会在当前js执行主线程中利用Worker类新开辟一个额外的线程来加载和运行特定的JavaScript文件，这个新的线程和JavaScript的主线程互不干扰。同时HTML5也规定了 Web Worker中是不能操作DOM的，任何需要操作DOM的任务都需要委托给JavaScript主线程来执行，所以虽然引入HTML5 Web Worker，但仍然没有改变JavaScript单线程的本质。
EventLoop 事件循环机制
好了，前面铺垫那么多，终于来到了标题所讲的部分了。那么，什么是任务队列和EventLoop呢？
其实，在js执行过程中，分为一个主执行栈和一个任务队列。js的代码执行会在主执行栈中进行，遇到http请求和定时器等异步操作的时候会丢给对应线程执行。而每个异步任务都有一个回调函数，等到请求操作完成或者定时器数秒完成之后，会把对应的回调函数放入到任务队列中。而js主执行栈里面的内容为空后，就会来任务队列里面按队列顺序取一个函数到主执行栈里执行，等函数执行完成之后栈又空了，再来任务队列里取函数执行，如此反复循环直到任务队列和栈都为空，这就是所谓的事件循环机制EventLoop。
我们可以通过下边例子来熟悉 事件循环机制
function a(){
console.log('this is a function');
}
function b(){
console.log('this is b function');
a();
}
setTimeout(function() {
console.log('this is setTimeout');
}, 0);
b();
1.这段代码在执行b函数之前，遇到setTimeout，所以将setTimeout丢到定时器线程里面去数秒，而主执行栈继续执行，所以调用函数b，函数b入主执行栈。
2.零秒很快数完，所以setTimeout后面的回调函数被放入到任务队列里面，但是主执行栈里面现在不为空，所以还没有轮到任务队列里的函数执行。
3.调用函数b的时候就创建了主执行栈的第一帧，里面包含了b函数的参数和局部变量等，执行输出this is b function。当b调用a时，创建第二帧，同样该帧包含a函数的参数和局部变量，执行输出this is a function。a执行结束，第二帧就出栈。同时b也执行结束了，第一帧出栈，此时主执行栈就为空了。
4.主执行栈为空后，就开始调用任务队列里面的任务。取出第一个回调函数执行，创建新的第一帧，执行输出this is setTimeout。执行完毕该帧出栈，栈为空，继续去任务队列取下一个任务到栈里执行。如此循环反复。
再看一个例子
console.log('A')
while(true) {
}
console.log('B')
// 执行结果
A
先执行输出A这个是没有问题的，当执行到while循环的时候，这是一个同步任务，又是一个循环体，会一直循环执行，所以执行不到B了
再看下边的例子
for(var i=0;i<4;i++){
setTimeout(() => {
console.log(i)
}, 1000);
}
//输出结果 4个4
网友评论