HTML笔记 ·

javascript事件循环机制–event loop

JS最初被设计用在浏览器中是单线程,因为如果浏览器中的JS是多线程的,会出现下面这个矛盾点:

那么现在有2个进程,process1 process2,由于是多进程的JS,所以他们对同一个dom,同时进行操作。 process1 删除了该dom,而process2 编辑了该dom,同时下达2个矛盾的命令,浏览器瞬间就感觉懵逼了。

对于单线程来说,代码的执行顺序为自上而下执行,如果上一行解析时间很长,那么下面的代码就会被阻塞。 对于用户而言,阻塞就意味着"卡死",这样就导致了很差的用户体验。所以js就引入了异步的概念。

在前面我介绍过一遍文章--javascript异步编程使用方法,现在要说的是js单线程是如何实现异步的。答案就是是通过的事件循环(event loop),理解了event loop机制,就理解了JS的执行机制。

先来看一下下面这段代码的执行顺序:

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

实际的运行结果为1,3,2

通过上面的运行结果我们可以看出,setTimeout并没有立即执行,而是等到满足了一定条件才去执行的,这类代码,我们叫异步代码。

所以,这里我们首先知道了JS里的一种分类方式,就是将任务分为:同步任务和异步任务。在这里,同步任务为主线程。

于是乎就产生了一种执行机制:

首先判断代码是同步还是异步,如果是同步则进入主线程,如果是异步代码就进入event table;

异步任务在event table中注册函数,当异步代码达到执行条件时,就被推入到event queue事件队列当中;

同步任务进入主线程后会一直执行,直到同步任务执行完毕,主线程才会出现空闲,此时会去事件队列中查找是否有可执行的异步任务,如果有就推入到主线程中开始执行。

以上的三步基本上就构成了一个事件的循环机制--event loop。

当然这并不是一个完整的时间循环机制,其中的异步任务也有宏任务和微任务的区别。

总的来说宏任务一般包括:整体script代码块,setTimeout,setInterval

微任务包括:Promise,process.nextTick,ajax等。

首先判断代码是同步还是异步,如果是同步则进入主线程,如果是异步则看是宏任务还是微任务,如果是宏任务就放入到宏任务的队列当中,如果是微任务就放入到微任务的队列当中;

异步代码达到执行条件后就进入到事件队列当中,在此,微任务有一个优先权,就是当微任务中有任务,宏任务在事件队列当中的顺序就会靠后,即使宏任务达到了运行条件,也不会执行;

同步任务进入主线程后会一直执行,直到同步任务执行完毕,主线程出现空闲,此时去事件队列中查找,发现有宏任务和微任务,此时会等待微任务执行完成才会执行宏任务,然后按顺序执行完成。

这就是一个完整的时间循环机制。

看完上面的循环机制,再来看下面这这段代码:

setTimeout(function(){
     console.log('定时器开始啦')
 });
 
new Promise(function(resolve){
     console.log('马上执行for循环啦');
     for(var i = 0; i < 10000; i++){
         i == 99 && resolve();
     }
 }).then(function(){
     console.log('执行then函数啦')
 });
 console.log('代码执行结束');

很明显,按照上面的说法,这里的执行结果应该是:马上执行for循环啦--代码执行结束---执行then函数啦--定时器开始啦

由此我们看出setTimeout并不是我们想的那样,我们认为设置时间为3000,就是3秒之后开始执行内部代码,但是这种说并不严谨,准确的解释是:3秒后,setTimeout里的函数被会推入event queue,而event queue(事件队列)里的任务,只有在主线程空闲时才会执行。如果主线程执行内容很多,执行时间超过3秒,比如执行了10秒,那么这个函数只能10秒后执行了。

参与评论