JS-线程事件循环任务队列

Posted 2021-01-31 zjffun

JS 是单线程的，但是却能执行异步任务，这主要是因为 JS 中存在事件循环（Event Loop）和任务队列（Task Queue）。

事件循环：

JS 会创建一个类似于 while (true) 的循环，每执行一次循环体的过程称之为 Tick。每次 Tick 的过程就是查看是否有待处理事件，如果有则取出相关事件及回调函数放入执行栈中由主线程执行。待处理的事件会存储在一个任务队列中，也就是每次 Tick 会查看任务队列中是否有需要执行的任务。

任务队列：

异步操作会将相关回调添加到任务队列中。而不同的异步操作添加到任务队列的时机也不同，如 onclick, setTimeout, ajax 处理的方式都不同，这些异步操作是由浏览器内核的 webcore 来执行的，webcore 包含上图中的3种 webAPI，分别是 DOM Binding、network、timer模块。

1. onclick 由浏览器内核的 DOM Binding 模块来处理，当事件触发的时候，回调函数会立即添加到任务队列中。
2. setTimeout 会由浏览器内核的 timer 模块来进行延时处理，当时间到达的时候，才会将回调函数添加到任务队列中。
3. ajax 则会由浏览器内核的 network 模块来处理，在网络请求完成返回之后，才将回调添加到任务队列中。

主线程

JS只有一个线程，称之为主线程。而事件循环是主线程中执行栈里的代码执行完毕之后，才开始执行的。所以，主线程中要执行的代码时间过长，会阻塞事件循环的执行，也就会阻塞异步操作的执行。只有当主线程中执行栈为空的时候（即同步代码执行完后），才会进行事件循环来观察要执行的事件回调，当事件循环检测到任务队列中有事件就取出相关回调放入执行栈中由主线程执行。

• （所有代码都主线程里跑，主线程没代码了就在任务队列中读回调函数（异步操作）回到主线程里跑）

1. 所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
2. 主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
3. 一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
4. 主线程不断重复上面的第三步。（"任务队列"是一个先进先出的数据结构，排在前面的事件，优先被主线程读取。）

例1：
var req = new XMLHttpRequest();
  req.open(‘GET‘, url);    
  req.onload = function (){};    // 这两个异步方法就会在 ajax 完成后推入任务队列，再由主线程执行
  req.onerror = function (){};    
  req.send();

例2：
setTimeout(function(){
  // 如果有大量的操作，可能会阻塞 UI 等，则可以使用 setTimeout 让这些操作在主线程把更重要的代码执行完毕之后，再来执行这里的操作。从而提高浏览器的性能。
},0);// 设置为 0，也会有个最小间隔值，也会在主线程中的代码运行完成后，由事件循环从任务队列将回调添加到执行栈中才执行


例3：
// 事件循环测试。执行结果是 2-3-4-1，1在最后输出，说明事件循环是所有同步代码执行完后才开始执行的。

‘use strict‘;

setTimeout(function() {
  console.log(1);
}, 0);

console.log(2);

let end = Date.now() + 1000*5;

while (Date.now() < end) {
}

console.log(3);

end = Date.now() + 1000*5;

while (Date.now() < end) {
}

console.log(4);