Javascript 异步实现 & 事件循环

浏览器的进程和线程

一、js的单线程和异步

• js的单线程（single threaded）和异步（asynchronous）两个基本矛盾的概念是怎么整合到js上的
• 首先必须肯定js本身不可能是异步的，但js的宿主环境（比如浏览器，Node）是多线程的
• 宿主环境通过某种方式（事件驱动）使得js具备了异步的属性

二、浏览器的进程

• 浏览器的主进程：负责协调、主控
• 第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建
• GPU进程：最多一个，用于3D绘制等
• 浏览器渲染进程（浏览器内核）：主要作用为页面渲染，脚本执行，事件处理等

三、浏览器内核线程

1、JS引擎线程

• JS引擎一直等待着任务队列中任务的到来，然后加以处理
• 一个Tab页中无论什么时候都只有一个JS引擎在运行JS程序

2、GUI渲染线程

• GUI渲染线程与JS引擎线程是互斥的
• 当JS引擎执行时GUI线程会被挂起
• GUI更新会被保存在一个队列中等到JS引擎空闲时执行

3、定时器线程

• 传说中的setInterval与setTimeout所在线程
• 二者的定时计数功能不是由JS引擎完成的，而是通过单独的线程来完成的，从而保证计时准确
• 计时完毕，将回调添加到事件队列中，等待JS引擎空闲执行

4、事件触发线程

• 点击事件等会在对应条件触发的时候被添加到事件队列，等js引擎空闲执行
• 说白了就是内核通过一个单独的线程来进行事件的监听和处理

5、异步HTTP请求线程

• 在发送http请求的时候，这个线程会被执行
• 这个线程会把回调的事件放入到事件队列中等待js引擎执行

总结：浏览器多进程，浏览器内核多线程

---

事件循环(JS执行机制)

一、同步和异步任务

• javascript是一门单线程语言，所有任务需要排队，前一个任务结束，才会执行后一个任务
• 如果上一个任务的执行过程耗时很长，下一个任务就不得不等待很长的时间，所以任务分成了 同步任务 和 异步任务
• 同步任务在主线程上是一个个执行，而异步任务则会进入任务队列（task queue），只有在所有同步任务执行完，异步任务才会被执行

1、同步异步任务的执行机制

• js中的异步的代码主要是定时器、事件响应回调、异步请求（ajax）
• 上面的三者都会在 Event Table 中注册回调函数，适当的时候（定时到时、事件触发、请求完成）会将这些函数推入到Event Queue，等待js引擎的执行
  

图片引用自：https://juejin.im/post/59e85eebf265da430d571f89

2、setTimeout & setInterval

• 二者并不能保证到了相应的时间后会立即执行
• 比如下面的这段代码并不是 3 秒之后就能输出setTimeout里面的内容，遇到setTimeout，会将里面的任务注册到 Event Table，这里的定时3秒，意思是3秒之后会将这个任务推入到 Event Queue 等待js引擎的执行，但是js引擎空闲的时候才能执行它呀，要是一直有一个比较耗时的任务一直霸占着js引擎的话，就不能保证这个定时任务到底什么时候执行了
• setInterval 也是一样的，这就导致了一旦setInterval的回调函数执行时间超过了延迟时间ms，那么就完全看不出来有时间间隔了