[Toc]
为什么js是单线程?
- 因为js的主要用途是在浏览器中操作DOM, 这决定了它只能是单线程,否则可能会造成同步的问题. 试想一个线程对某个DOM节点上修改内容, 另一个线程删除这个DOM节点, 那么两个线程将会造成冲突.
- 此外html5还新增了web worker, 它允许js创建多个线程. 但是子线程完全受主线程控制, 且子线程不允许操作DOM, 它没有改变js单线程的本质.
- 单线程必然造成阻塞, 但是js为了提高线程的利用率, 将需要耗费时间的操作(比如ajax请求,dom操作等)交给宿主的webAPIs处理, 并继续执行接下来的代码, 由宿主负责接收事件, 并将接收到的事件丢进事件循环队列, 等待主线程处理完执行栈中最后一个作用域中的代码后, 再将事件循环队列中的事件的回调函数压入执行栈执行.
事件循环
-
js代码是分块的, 且只有一个块是现在执行(执行栈中最顶部的代码), 其余的则会在将来执行. 最常见的块单位是函数.
- 为了方便理解可以将现在执行代码理解为同步代码, 将来执行代码理解位异步代码.
任何时候, 只要把一段代码包装成函数, 并指定它在响应某个事件(定时器, 鼠标点击, ajax响应等)时执行, 就是在代码中创建了一个将来执行的块.
事件循环(eventLoop)是一种机制, 由宿主提供, 用来调用js引擎处理程序中的每个将来执行块的执行
-
事件循环伪代码:
var eventLoop=[] var event while(true){ // 一次tick if(eventLoop.length>0){ event=eventLoop.shift() try{ event() }catch(err){ reportError(err) } } }不太完善的补充: 只有当前执行栈中的代码全部执行完毕后才会进行事件循环, eventLoop队列中的事件添加由宿主的webAPIs决定
setTimeout()做的是: 在设定的delay时间后, 将回调函数插入事件循环队列中. 该回调函数必须等到前面的项目处理完毕之后才会被调用, 也因此setTimeout()的回调函数的调用时间无法确定.
任务队列(job queue)
它是挂在事件循环队列的每一个tick之后的一个队列. 在事件循环的每个tick中, 可能出现的Promise.then(), MutationObserver异步任务不会导致一个新的事件添加到事件循环队列末尾, 而是在当前tick的任务队列末尾再添加一个任务.
console.log(1) // 同步代码,按顺序调用 setTimeout(()=>{ console.log(2) // 它被加入到事件循环队列中,在下一个tick中调用 },0) new Promise(function(resolve,reject){ console.log(3) // new Promise不是异步代码, Promise.then()才是异步代码 resolve() }).then(function(){ console.log(4) // 它被加入到任务队列, 本次tick的末尾 }) console.log(5) // 同步代码,按顺序调用 // 打印 1 3 5 4 2不完善的补充: 一些文档中将Promise.then与MutationObserver列为微任务队列, 其它的异步代码列为宏任务队列. 个人理解为: 在每一个tick中, 微任务队列会在同步代码执行后再执行. 宏任务队列丢进eventLoop中等待调用.
setTimeout(() => { console.log(1) // tick1 setTimeout(() => { console.log(2) // tick3 setTimeout(() => { console.log(3) // tick5 }, 0); }, 0); setTimeout(() => { console.log(4) // tick4 }, 0); }, 0); setTimeout(() => { console.log(5) // tick2 }, 0); // 打印1 5 2 4 3
