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:主要这幅图太有说服力度了，不信你看)：

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

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

宏任务macro task [ˈmækrəʊ]：当前调用栈中执行的代码成为宏任务。（主代码快，定时器等等）。exp:script（全局任务），setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering

微任务micro task [ˈmaɪkrəʊ]：当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。（promise.then，proness.nextTick等等）。exp:process.nextTick，promise,Object.observer,MutationObserver

宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。

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

下面来看个栗子：

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');
    });
});

看到诸多异步延时任务先不要慌，一步一步来解读，代码中的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。

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

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

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

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

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

等一下( •́ .̫ •̀ )，我还有最后一句话：

比我差的人还没放弃，

比我好的人仍在努力，

我就更没资格说，

我无能为力！

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