[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