js的异步和单线程

时间:2023-01-20 18:23:07

最近,同事之间做技术分享的时候提到了一个问题“js的异步是另开一个线程吗?”当时为此争论不休。会后自己查阅了一些资料,对这个问题进行一个自我的分析与总结,有不同意见的希望可以赐教,谢谢!

  js的异步主要有三部分:定时器setTimeout/setInterval;HTTP请求;事件响应。

对于定时器setTimeout/setInterval的异步问题,高程上《高级定时器》(P609)是这样解释的:

除了主JavaScript执行进程外,还需要一个在进程下一次空闲时执行的代码队列。随着页面生命周期推移,代码会按照执行顺序添加入队列,例如当按 钮被按下的时候他的事件处理程序会被添加到队列中,并在下一个可能时间内执行。在接到某个Ajax响应时,回调函数的代码会被添加到队列。JavaScript中没有任何代码是立即执行的,但一旦进程空闲则尽快执行。定时器对队列的工作方式是当特定时间过去后将代码插入,这并不意味着它会马上执行,只能表示它尽快执行。
定时器对队列的工作方式是当特定时间过去后将代码插入,这并不意味着它会马上执行,只能表示它尽快执行。定时器对队列的工作方式是,当特定的时间过去后,将代码插入,注意添加到队列并不意味着它会马上执行,而只能说它会尽快执行,设定一个150ms后执行的定时器,不代表150ms后它会马上执行,它只会表示在150ms后被加入到队列中,如果这个时间点队列是空闲的,那么这段代码就会被执行;其他情况下,代码可能明显地等待更长时间才执行。

总结:

  1. Javascript引擎解析是一个单线程的过程,浏览器无论在任何时候有且只有一个线程在运行Javascript程序;

  2. 浏览器是多线程的,这些线程在内核控制下相互配合以保持同步。在处理js的异步上浏览器内核的实现可能有多个进程:Javascript引擎线程、界面渲染线程、浏览器事件触发线程、HTTP请求线程…… 补充 : 这些线程的名字为渲染引擎、网络、js解析器等 参考自 前端必读:浏览器内部工作原理
  3. Javascript除了一个主线程外,还配有一个代码队列,这个队列用以存放定时器、HTTP请求、事件响应的回调。

所以我对这个流程的理解是这样的:

  Javascript代码自上而下执行的,当执行到定时器、或者发送HTTP请求、或者发生用户交互事件响应时,会自动触发对应事件(HTTP请求、事件响应),将回调函数储存到队列中。Javascript执行完主线程代码后,会去执行任务队列,队列内这个时间点是否有代码要执行;如果有,则执行队列中的代码。

进一步理解——对队列:

  有细心的会发现,上面的理解没有加入"定时器",我对此的进一步理解: 有一个现象,Javascript里提供了console.time(name)console.timeEnd(name)可以打印出一段代码的执行时间。由此,我感觉Javascript每一段代码的执行都会有记录一个时间。Javascript会根据这个时间来安排队列.

  当代码执行到用户交互事件时,会传入回调给队列,该回调的时间就是事件触发的时间;当代码执行到定时器的时候,传入队列的回调函数的时间是定时器触发的时间加上延迟;而HTTP请求传递给队列的回调函数的时间则是其取得数据的时间(我感觉中间可能穿插了一个readyState==4时会重新传入一个时间,或者可以直接抛去时间,做if判断,判断状态是4时执行);这样可以根据时间对队列进行进一步排序,形成一个自上而下的队列!