JavaScript的事件执行机制---进阶必备

☞☞ 个人主页欢迎访问 ☜☜


本文是承接Promise来说的,大家都知道,JavaScript脚本是单线程的语言,虽然有H5的Web-Worker加持,但是创建出来的子线程完全受主线程控制,且不得操作DOM,所以还是无法改变JavaScript单线程的本质

JavaScript是单线程执行的,无法同时执行多段代码。当某一段代码正在执行的时候,所有后续的任务都必须等待,形成一个队列。一旦当前任务执行完毕,再从队列中取出下一个任务,这也常被称为 “阻塞式执行”。所以一次鼠标点击,或是计时器到达时间点,或是Ajax请求完成触发了回调函数,这些事件处理程序或回调函数都不会立即运行,而是立即排队,一旦线程有空闲就执行。假如当前JavaScript线程正在执行一段很耗时的代码,此时发生了一次鼠标点击,那么事件处理程序就被阻塞,用户也无法立即看到反馈,事件处理程序会被放入任务队列,直到前面的代码结束以后才会开始执行。如果代码中设定了一个setTimeout,那么浏览器便会在合适的时间,将代码插入任务队列,如果这个时间设为0,就代表立即插入队列,但不是立即执行,仍然要等待前面代码执行完毕。所以 setTimeout 并不能保证执行的时间,是否及时执行取决于JavaScript 线程是拥挤还是空闲。

这里就涉及到了执行栈(Stack)和队列任务(Queue Task)的概念,将同步任务都放入主线程的Stack当中,将异步和延时的任务都放入Event Queue里面等待执行,Event Queue即为事件队列,所包含的全是事件,等执行栈为空之后就代表主线程执行完毕,再去Event Queue中读取第一个事件放入主线程,执行完毕再读取第二个...因此形成一个JavaScript的Event Loop(事件循环),Event Loop就是JavaScript的实现异步的一种方式,也是JavaScript的执行机制。

至于定时器(timer)嘛,因为里面的参数有一个是回调函数,另一个是延时执行的毫秒数,所以他也要放进队列中,而上面的引用部分有个延时0毫秒,它的含义就是立即放入队列,而不是立即放进执行栈执行;JavaScript还有一种函数叫做回调函数,阮一峰大神是这么说的:

所谓"回调函数"(callback),就是那些会被主线程挂起来的代码。异步任务必须指定回调函数,当主线程开始执行异步任务,就是执行对应的回调函数。

下面这幅图是从别人那里偷来的(ps:主要这幅图太有说服力度了,不信你看):

JavaScript的事件执行机制---进阶必备_第1张图片

nodeJs里面提出了和任务队列有关联的方法process.nextTick(callback),它的含义是本次循环完毕等到下一次循环开始再执行,也就是在当前执行栈的尾部。

在网上经常看到这样的关键字,从广义上来讲,我们弄明白了同步异步,但是狭义上来说还有两个新的概念,其实这个概念我还真不确定官方是否同意,我是看到闹闹不爱闹在掘金中阐明的:

  1. 宏任务macro task [ˈmækrəʊ]:当前调用栈中执行的代码成为宏任务。(主代码快,定时器等等)。exp:script(全局任务),setTimeout ,setInterval ,setImmediate ,I/O ,UI rendering
  2. 微任务micro task [ˈmaɪkrəʊ]: 当前(此次事件循环中)宏任务执行完,在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。(promise.then,proness.nextTick等等)。exp:process.nextTick,promise,Object.observer,MutationObserver
  3. 宏任务中的事件放在callback queue中,由事件触发线程维护;微任务的事件放在微任务队列中,由js引擎线程维护。

不管这个东西存不存在,既然国人都这么叫了,那我是这么理解的:
他们口中的宏观任务就是我们的回调函数,宏观任务和微观任务就是我们的Event Queue,执行栈执行完毕会执行微观任务再执行宏观任务,我不建议大家继续这么称呼,其实macro task和micro task都属于是浏览器执行js的执行机制,这个我不是为了较真,估计我也是被我们公司的老总教训的太多了,不去不去怕了怕了o((⊙﹏⊙))o....

下面来看个栗子:

JavaScript的事件执行机制---进阶必备_第2张图片
setTimeout(function() {
    console.log('setTimeout');
});
Promise.resolve(function () {
  console.log('resolve');
});
new Promise(function(resolve) {
    console.log('promise');
    resolve();
}).then(function() {
    console.log('then');
});
console.log('console');

其实这个栗字很简单,进入script主线程,遇到setTimeout push到macro task,遇到resolve push到macro task,new Promise立即执行,率先打印,then push到micro task,接着第二个打印console,然后执行micro task打印出then,接着执行macro task打印出setTimeout,因为Promise.resolve这个回到函数未调用,有的浏览器报undefined,有的不打印。

到了这里就差不多了,为了帮助大家彻底吃透它,再来一剂猛药:

console.log('1');
setTimeout(() => {
    console.log('9');
    this.$nextTick(() =>  {
        console.log('11');
    });
    new Promise(function(resolve) {
        console.log('10');
        resolve();
    }).then(function() {
        console.log('12')
    });
},5000);
this.$nextTick(() =>  {
    console.log('3');
});
new Promise(function(resolve) {
    console.log('2');
    resolve();
}).then(function() {
    console.log('4');
});
setTimeout(() => {
    console.log('5');
    this.$nextTick(() =>  {
        console.log('7');
    });
    new Promise(function(resolve) {
        console.log('6');
        resolve();
    }).then(function() {
        console.log('8');
    });
});
JavaScript的事件执行机制---进阶必备_第3张图片

看到诸多异步延时任务先不要慌,一步一步来解读,代码中的this.$nextTick(callback)千万不要解读成上面的process.nextTick(callback),否则你会被坑惨的,process是nodeJs里面的,nodeJs执行机制和JavaScript的执行机制是不同的,nodeJs不会看你代码的层级关系哦,只关心你的事件的类型,按照这个顺序来执行代码,而我们的js是按照父级的事件,有着层级关系的执行。
vueJs的主线程先执行,首先打印出1,第一个setTimeout push到macro task,nextTick放入micro task,Promise立即执行,then push进micro task,第二个setTimeout push到macro task,接着执行micro task,打印3 4,最后执行macro task,注意这里有个坑,macro task里面有两个timer,第一个5000ms之后执行,所以先执行第二个,所以最后的答案小学生都知道,打印顺序从1到12。

JavaScript的事件执行机制---进阶必备_第4张图片

本文的所有内容均是一字一句敲上去的,希望大家阅读完本文可以有所收获,因为能力有限,掌握的知识也是不够全面,欢迎大家提出来一起分享!谢谢O(∩_∩)O~

关于更多浏览器渲染机制可以查看 从event loop规范探究javaScript异步及浏览器更新渲染时机

欢迎访问我的GitHub,喜欢的可以star,项目随意fork,支持转载但要下标注;
欢迎光临个人主页

等一下( •́ .̫ •̀ ),我还有最后一句话:
比我差的人还没放弃,
比我好的人仍在努力,
我就更没资格说,
我无能为力!

你可能感兴趣的:(JavaScript的事件执行机制---进阶必备)