(1) javaScript Engine,Chrome 的引擎就是 V8
(2) Web APIs,DOM 的操作,AJAX,Timeout 等实际上调用的都是这里提供的
(3)Callback Queue,回调的队列,也就是刚刚所有的 Web APIs 里面的回调函数,实际上都是放在这里排队的
(4) EventLoop,事件循环,也就是刚所说的宏任务和微任务的容器
call Stack
本身就是一个调用栈(就像浏览器中的JavaScript解释器),追踪函数执行流的一种机制,当执行环境调用了多个函数时,通过调用栈,我们可以追踪到哪一个函数在执行,执行的函数体中又调用了哪些函数。
每调用一个函数,解释器就会把该函数添加进调用栈并开始执行。
正在调用栈中执行的函数还调用了其它函数,那么新函数也将会被添加进调用栈,一旦这个函数被调用,便会立即执行。
当前函数执行完毕后,解释器将其清出调用栈,继续执行当前执行环境下的剩余的代码。
当分配的调用栈空间被占满时,会引发“堆栈溢出”。
是存放执行的重要条件,也是因为只有一个调用栈,所以被称为单线程
callback quene
在js的编译阶段,将一些时间防止在执行队列中
EventLoop 事件循环
一个作用就是将callback quene队列里的执行事件放在在call stack中,执行
3.事件循环
js是单线程的,执行较长的js时候,页面会卡死,无法响应,但是所有的操作都会被记住到另外的队列。比如:点击了一个元素,不会立刻的执行,但是等到js加载完毕后就会执行刚才点击的操作,能够知道有一个队列记录了所有有待执行的操作,这个队列分为微观和宏观。微观会比宏观执行得更快。
事件循环就是多线程的一种工作方式,Chrome里面是使用了共享的task_runner对象给自己和其它线程post task过来存起来,用一个死循环不断地取出task执行,或者进入休眠等待被唤醒。Mac的Chrome渲染线程和浏览器线程还借助了Mac的sdk Cococa的NSRunLoop来做为UI事件的消息源。Chrome的多进程通信(不同进程的IO线程的本地socket通信)借助了libevent的事件循环,并加入了到了主消息循环里面。
称为事件循环的原因大多来源于源码
while (queue.waitForMessage()) {
queue.processNextMessage();
}
可以看到入伏哦有消息就会执行,没消息就会继续等待
消息执行完成
由于js单线程,每一个消息完整的执行后才会执行其他的消息,不会被其他的消息抢占,这样的缺点就是当一个消息执行的特别久的时候web用户无法处理用户的交互,比如点击或者滚动等,因此需要缩短消息的处理时间,将一个消息裁剪成多个消息。
添加消息
在浏览器里,当一个事件发生且有一个事件监听器绑定在该事件上时,消息会被随时添加进队列。如果没有事件监听器,事件会丢失。所以点击一个附带点击事件处理函数的元素会添加一个消息,其它事件类似。比如事件委托,监听,可随时放入消息队列
setTimeout 接受一个参数,待加入队列的消息和一个延迟,延迟代表了消息加入队列的最小延迟事件,如果队列中没有其他的消息,在这段延迟时间过了后,消息会被立刻处理,但是如果有其他的消息,必须等到其他的消息处理完,因此,延迟时间表示最少延迟时间
4.宏任务和微任务
是一种人们定义的执行名字,
如何区分宏任务和微任务呢?划分的标准是什么
宏任务本质:参与了事件循环的任务。
回到 Chromium 中,需要处理的消息主要分成了三类:
Chromium 自定义消息
Socket 或者文件等 IO 消息
UI 相关的消息
1. 与平台无关的消息,例如 setTimeout 的定时器就是属于这个
2.Chromium 的 IO 操作是基于 libevent 实现,它本身也是一个事件驱动的库
3.UI 相关的其实属于 blink 渲染引擎过来的消息,例如各种 DOM 的事件
其实与 JavaScript 的引擎无关,都是在 Chromium 实现的。
微任务本质:直接在 Javascript 引擎中的执行的,没有参与事件循环的任务。
是个内存回收的清理任务,使用过 Java 的童鞋应该都很熟悉,只是在 JavaScript 这是V8内部调用的
就是普通的回调,MutationObserver 也是这一类
Callable
包括 Fullfiled 和 Rejected 也就是 Promise 的完成和失败
Thenable 对象的处理任务
宏任务,微任务的优先级
promise 是在当前脚本代码执行完后,立刻执行的,它并没有参与事件循环,所以它的优先级是高于 setTimeout。
宏任务和微任务的总结:
宏任务 Macrotasks 就是参与了事件循环的异步任务。
微任务 Microtasks 就是没有参与事件循环的“异步”任务。
console.log("开始执行1")
console.log(Object.keys({a: 1}));
setTimeout(() => {
console.log(Object.keys({b: 2}));
var promise = new Promise((resolve, reject) => {
resolve(1);
});
promise.then(res => {
//后续增加测试
setTimeout(() => {
console.log(Object.keys({e:1}))
}, 0);
console.log(Object.keys({c: 1}));
});
}, 2000);
console.log("结束执行2")
微观任务是在当前JS调用执行完了之后立刻执行的,是同步的,在同一个调用栈里,没有多线程异步,如这里包括promise.then在内的setTimeout回调里的代码都是在DOMTimer.Fired执行的,只是说then被放到了当前要执行的整一个异步回调函数的最后面执行。所以setTimeout 0是给主线程的消息循环任务队列添加了一个新的task(回调),而promise.then是在当前task的V8里的microtask插入了一个任务。那么肯定是当前正在执行的task执行完了才执行下一个task.vue的nextTick 也是一个微观任务
除此之外的onload事件
let img = new Image();
img.src = 'image01.png?_=' + Date.now();
img.onload = function () { console.log('img ready'); } console.log(Object.keys({e: 1}));
微观任务是不属于事件循环的,它是V8的一个实现,用来实现Promise的then/reject,以及其它一些需要同步延后的callback,本质上它和当前的V8调用栈是同步执行的,只是放到了最后面。除了Promise/MutationObserver,在JS里面发起的请求也会创建一个微观任务延后执行。
参考网站: