js事件循环机制

一、进程和线程

• 进程是系统分配的独立资源，是 CPU 资源分配的基本单位，进程是由一个或者多个线程组成的。

• 线程是进程的执行流，是CPU调度和分派的基本单位，同个进程之中的多个线程之间是共享该进程的资源的。

二、浏览器内核

• 浏览器是多进程的，浏览器每一个 tab 标签都代表一个独立的进程（也不一定，因为多个空白 tab 标签会合并成一个进程），浏览器内核（浏览器渲染进程）属于浏览器多进程中的一种。

• 浏览器内核有多种线程在工作。

  • GUI 渲染线程:

    • 负责渲染页面，解析 HTML，CSS 构成 DOM 树等，当页面重绘或者由于某种操作引起回流都会调起该线程。
    • 和 JS 引擎线程是互斥的，当 JS 引擎线程在工作的时候，GUI 渲染线程会被挂起，GUI 更新被放入在 JS 任务队列中，等待 JS 引擎线程空闲的时候继续执行。

  • JS 引擎线程:

    • 单线程工作，负责解析运行 JavaScript 脚本。
    • 和 GUI 渲染线程互斥，JS 运行耗时过长就会导致页面阻塞。

  • 事件触发线程:

    • 当事件符合触发条件被触发时，该线程会把对应的事件回调函数添加到任务队列的队尾，等待 JS 引擎处理。

  • 定时器触发线程:

    • 浏览器定时计数器并不是由 JS 引擎计数的，阻塞会导致计时不准确。
    • 开启定时器触发线程来计时并触发计时，计时完成后会被添加到任务队列中，等待 JS 引擎处理。

  • http 请求线程:

    • http 请求的时候会开启一条请求线程。
    • 请求完成有结果了之后，将请求的回调函数添加到任务队列中，等待 JS 引擎处理

三、JavaScript 引擎是单线程       

        JavaScript 引擎是单线程，也就是说每次只能执行一项任务，其他任务都得按照顺序排队等待被执行，只有当前的任务执行完成之后才会往下执行下一个任务。

        JS是单线程（如果一个线程删DOM，一个线程增DOM，浏览器傻逼了～所以只能单着了），虽然有webworker酱紫的多线程出现，但也是在主线程的控制下。webworker仅仅能进行计算任务，不能操作DOM，所以本质上还是单线程。

　　单线程即任务是串行的，后一个任务需要等待前一个任务的执行，这就可能出现长时间的等待。但由于类似ajax网络请求、setTimeout时间延迟、DOM事件的用户交互等，这些任务并不消耗 CPU，是一种空等，资源浪费，因此出现了异步。通过将任务交给相应的异步模块去处理，主线程的效率大大提升，可以并行的去处理其他的操作。当异步处理完成，主线程空闲时，主线程读取相应的callback，进行后续的操作，最大程度的利用CPU。此时出现了同步执行和异步执行的概念，同步执行是主线程按照顺序，串行执行任务；异步执行就是cpu跳过等待，先处理后续的任务（CPU与网络模块、timer等并行进行任务）。由此产生了任务队列与事件循环，来协调主线程与异步模块之间的工作。

四、JavaScript 事件循环机制

                                                                                             js事件循环示意图

如上图为事件循环示例图（或JS运行机制图），流程如下：

　　　　step1：主线程读取JS代码，此时为同步环境，形成相应的堆和执行栈；

　　　　step2:  主线程遇到异步任务，指给对应的异步进程进行处理（WEB API）;

　　　　step3:  异步进程处理完毕（Ajax返回、DOM事件处罚、Timer到等），将相应的异步任务推入任务队列；

　　　　step4: 主线程执行完毕，查询任务队列，如果存在任务，则取出一个任务推入主线程处理（先进先出）；

　　　　step5: 重复执行step2、3、4；称为事件循环。

　　执行的大意：

　　　　同步环境执行(step1) -> 事件循环1(step4) -> 事件循环2(step4的重复)…

　　其中的异步进程有：

　　　　a、类似onclick等，由浏览器内核的DOM binding模块处理，事件触发时，回调函数添加到任务队列中；

　　　　b、setTimeout等，由浏览器内核的Timer模块处理，时间到达时，回调函数添加到任务队列中；

　　　　c、Ajax，由浏览器内核的Network模块处理，网络请求返回后，添加到任务队列中。